Xin Calendar 2 Step-by-step: Set up a Popup-Window calendar

  [Show Calendar]   [Show Calendar]

To set up a Popup-Window calendar, we can follow the same steps as we did for the In-Page calendar:

  1. Set up the HTML page as usual, so we have some date fields in a form.

    For example, we have:

    <input type="text" name="start_date" value="">
    <input type="text" name="end_date" value="">

  2. In the <HEAD> section of the page source, include the following scripts:

    The CSS file and the config file for an In-Page calendar can be re-used here. For example:

    <script language="javascript" src="../config/xc2_default.js"></script>
    <script language="javascript" src="../script/xc2_window.js"></script>

  3. Set up the popup triggers for the calendars

    We can only use links as triggers for Popup-Window calendars, for example:

    <a href="javascript:showCalendar('',document.forms[0].start_date,null,'','Start Date',0,30)">Show Calendar</a>

    The showCalendar() call is very similar to the one we just used for In-Page calendars, the differences are that in the place of the place holder Id parameter for an In-Page calendar, we have the title of the popup window, and we don't need the last parameter in the showCalendar() call for an In-Page calendar since Popup-Window calendars won't be static:

  4. Adjust the window size and calendar template (optional)

    If we take a look at the default config file (config/xc2_default.js), we will notice some window settings at the end of the file:


    The calendar template for the popup window is just a simple table layout with a DIV tag as the place holder for the calendar, it also includes the default CSS file (css/xc2_default.css) for calendar styling and a control script (script/xc2_control.js) to interact with the opener window:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...>
    <link rel=stylesheet href="../css/xc2_default.css" type="text/css">
    <script language="javascript" src="xc2_control.js"></script>
    <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
    <div id="xcPopup" style="visibility:hidden">Keep this DIV intact.</div>

    We can use a different template file as long as we have the DOCTYPE line, the CSS file, the control script and the DIV place holder for the new template.

[The blocks of a calendar] [Back to index page]

# # #