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

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

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

For example, we have:

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

In the <HEAD> section of the page source, include the following scripts:
- the CSS file (or the embedded CSS definitions) for calendar styles
- the config file ... a Javascript file that stores the calendar settings
- the Popup-Window function script ... xc2_window.js
The CSS file and the config file for an In-Page calendar can be re-used here. For example:
```
<head>
<script language="javascript" src="../config/xc2_default.js"></script>
<script language="javascript" src="../script/xc2_window.js"></script>
</head>
```
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:
- showCalendar("conf_name", target_field, ref_field, "default_date", "window_title", dx, dy, name)
  1. conf_name ... the name for the mod configuration reference
  2. target_field ... the date field whose value will be set by the calendar
  3. ref_field ... the date field whose value will be the date reference for the calendar
  4. default_date ... default date reference for the calendar, if empty, today will be used
  5. window_title ... title of the popup window
  6. dx, dy ... position offset away from the mouse click spot
  7. name ... the optional name for the calendar
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:
```
xcWindowWidth=215;
xcWindowHeight=195;
xcWindowTemplate="../script/xc2_template.html"
```
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" ...>
<html>
<head>
<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<script language="javascript" src="xc2_control.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
<div id="xcPopup" style="visibility:hidden">Keep this DIV intact.</div>
</td></tr></table>
</body>
</html>
```
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]

# # #