Xin Calendar 2 Step-by-step: Set up an In-Page calendar

To set up an In-Page calendar, we can follow the steps below:

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 In-Page function script ... xc2_inpage.js
For example:
```
<head>
<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<script language="javascript" src="../config/xc2_default.js"></script>
<script language="javascript" src="../script/xc2_inpage.js"></script>
</head>
```
Set up the popup triggers for the calendars
Usually we can set a popup trigger in two ways:
- bind to the onfocus event of the date field
- put it in a link
If we use the onfocus event, we would also set up a place holder to position the calendar. A place holder is no more than a HTML tag with an Id attribute, and usually a TD tag will be used as a place holder, for example:
```
<td id="holder"><input type="text" name="start_date" value=""></td>
```
and then the popup trigger will be like:
```
<input ... onfocus="showCalendar('',this,this,'2004-07-01','holder',0,30,1)">
```
The showCalendar() call is what we need to pop up a calendar, it has the following syntax:
- showCalendar("conf_name", target_field, ref_field, "default_date", "holder_Id", dx, dy, mode, 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. holder_Id ... place holder Id for relative positioning, if empty, use mouse click spot for positioning
  6. dx, dy ... position offset away from the place holder or mouse click spot
  7. mode ... 1 for popup calendar, 0 for static calendar
  8. name ... an optional the name of the calendar, a random name will be generated if not specified
The showCalendar() call returns the name of the calendar, and the calendar can be referred to by this name later if the calendar is still present.

If we use a link to set up the popup trigger, we can still use the place holder but we usually don't need to, and the calendar will then pop up against the mouse click spot on the link. For example:
```
<a href="javascript:showCalendar('',document.forms[0].start_date,null,'','',0,30,1)">Show Calendar</a>
```
We can use a [ null ] parameter for the [ ref_field ] parameter to save some typings and tell the calendar to use the [ target_field ] object for both writing and reading.

Users from Xin Calendar might wonder why the name of the calendar becomes optional. Actually this is one of the major changes made in Xin Calendar 2 that internally a calendar can be re-used by more than one date field. In Xin Calendar, we use addCalendar() to define a calendar with an unique name then use showCalendar() to popup the calendar with the specified name. In Xin Calendar 2, we just combine them into one showCalendar() call and save the name parameter.

And since the showCalendar() call now takes objects instead of names for the two date field parameters, we can pass objects rather than an input field to the call and use some customized functions to write the date to and read the date from the object. We will talk about it later.

As a summary, an In-Page popup calendar page will probably look like this:

<!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="../config/xc2_default.js"></script>
<script language="javascript" src="../script/xc2_inpage.js"></script>
</head>

<body>
...
<form>
<table>
...
<td id="holder"><input type="text" name="start_date" value=""
  onfocus="showCalendar('', this, this, '2004-07-01', 'holder', 0,30, 1)"></td>

<input type="text" name="end_date" value=""><a
  href="javascript:showCalendar('', document.forms[0].end_date, document.forms[0].start_date, '','', 0,30, 1)">Calendar</a>
...
</table>
</form>
...
</body>
</html>

[Set up a Popup-Window calendar] [Back to index page]

# # #