Zapatec DHTML Calendar Manual

The DHTML Calendar files are bundled in a zip file. Click the download link in the Calendar section on Zapatec web site and follow the instructions to download the file.

Save the file (zpcal.zip) to your website root folder on your computer or server.

The wizard generates code for the exact kind of a calendar you want. The Graphic User Interface (GUI) allows you to visually select the language, theme, size, style, etc. for the calendar. After you have made your selections, the wizard generates the code you need to place the calendar in your HTML document, form, or application with a click of a button.

If the wizard is not run, follow the instructions how to download Calendar files.

The wizard page displays the calendar you are creating as you make your selections. It updates as you choose the features you want, so that you can see the possible end results.

Click the Next and Previous buttons to move through the panes, or choose a specific pane from the menu on the left side of the screen.

Click Next to move to the Theme and Language page and start creating your calendar.

For further customization of your calendar, choose the date and time formats you want. The following displays the examples of the date formats:

January 1, 2007
01-01-07
1/1/2007
01-Jan-07

You can configure a calendar to display multiple months simultaneously.

You can test the calendar until its appearance and behavior suit you perfectly. Click the Next button to generate the HTML for the calendar. Then copy and paste this code into your HTML document for a quick-and-easy calendar setup.

This section provides the description of the project files, excluding documentation and example files.

Most Web developers use the Zapatec HTML Calendar with forms. You can create a small form with a text box and a button to build a simple calendar application.

<form action="#" method="get">
    <input type="text" name="data" id="f_date_b" />
    <button id="trigger" >...</button>
</form>

Insert the following code to make a calendar pop up when your form is used. Paste it directly after </form> and before </body>.

<script type="text/javascript">
Zapatec.Calendar.setup({
    inputField  : "data", // This is the ID of your form's text field
    ifFormat    : "%m %d, %Y", // Format in which you want the date returned
    button      : "trigger" // "trigger" is the ID of the form's button
});
</script>
<noscript>
<br/>
This page uses a 
<a href='http://www.zapatec.com/products/prod1'> Javascript Calendar </a>, 
but your browser does not support Javascript. 
<br/>
Either enable Javascript in your Browser or upgrade to a newer version.
</noscript>

Using your editing or FTP program, copy your web page and the entire zapatec folder to the root of your website.

Using your web browser, navigate to the web page that you created to include the Zapatec DHTML Calendar. Click the "trigger" button to view if the calendar pops up. Click a date to select it and make sure that the date displays in the empty box. Congratulations! You have set up the most basic version of the Zapatec DHTML Calendar! Now, you can change this highly adaptable application with the help of multiple features provided.

You can change the theme or language of the calendar by including a different file in the header.

<link rel="stylesheet" type="text/css" href="themes/winxp.css"/>

<link rel="stylesheet" type="text/css" href="themes/green.css"/>

<script type="text/javascript" src="lang/calendar-en.js"/>

<script type="text/javascript" src="lang/calendar-fr.js"></script>

<script type="text/javascript" src="lang/calendar-it.js"></script>

Events cause the calendar to perform a specific action based on the user’s actions. For example, you can have your calendar display a tip of the day tool tip when the user clicks it for the first time. In this case, the event would be the onClick event.

The following example sets up a handler called "cal_submit_days" for the onClick event:

<input type='button' value='Submit Days' onclick='cal_submit_days()' title='Submit Button'>

This option aligns your calendar relatively to the element containing it. The string consists of two characters. The first specifies the vertical alignment and the second - horizontal.

For example,

align : "BR";

positions the calendar completely below and to the right of its containing element.

The default is "Bl".

Below are the letters used to specify alignment.

The first character in the align string is one of the following:

The second character in the align string may be one of the following:

This option specifies the ID of or DOM element reference to the button, image, or other element that triggers a pop-up calendar.

If this option is true, the calendar object can be reused whenever possible. The default is false.

If this option is true, you can type in the input field while the Calendar is opened. The default is false.

This is the name of the event that closes a calendar.

By default, a calendar closes if one of the following happens:

In a calendar that displays multiple months, the control month is the month against which all controls are applied. Thus, the default date (usually, current date) is highlighted in the control month and the current year is the year of the control month.

The argument is a value between 1 and 12 that specifies the control month. The default is 1.

This option is used with the numberMonths option.

This option defines the date format stored in a display area. See the displayArea option.

The characters used to define the date format are the same as those listed for the ifFormat option.

The default is "%Y/%m/%d".

This option sets the date that the calendar displays initially. The default is current date.

This is an optional function that can be used to change the appearance of a specific date.

The function takes as input a Javascript date object and returns a boolean or a string. The returned value is interpreted as follows:

This callback is used to fill date cells with a custom text. Callback takes the date object and returns the text that will be inserted into the Calendar cell. Callback is called for each cell currently displayed, and update happens each time the Calendar is initiated by internal functionality or external means.

If this option is set to true, the user cannot drag the calendar. The default is false.

If true, this option disables changing the first day of a week. The default is false.

This is an optional function used to disable a date. It takes as input a Javascript data object and returns true if the date should be disabled.

This option disables the calendar’s year navigation buttons. The default is false.

This is the ID of or DOM element reference to the area, such as <span> or <div>, that contains the date.

If this option is true, when the singleClick option is false, date displays are updated on click. Otherwise, they are updated only on close. This setting is not valid if singleClick is true.

The default is true.

Using this option you may specify the name of the event that triggers a pop-up calendar. The default is "click".

If this option is true, the user can select any day of the week, including the first. If this option is false, the first day of the week is not selectable.

This option specifies the day that the calendar displays as the first day of the week. The argument is a number between 0 and 6. Zero indicates Sunday, 1 - Monday, etc. The default is zero.

A flat calendar is one that is visible when the page loads, in contrast to the default pop-up calendar that appears only in response to a click event.

The string passed to this option is the ID of the flat calendar container. The default is null.

<div id="calendar-container"></div>
<script>
    Zapatec.Calendar.setup( {
        flat : "calendar-container" 
    } );
</script>

This is the optional callback function for a flat calendar. It is invoked when the date in the calendar is changed with a reference to the calendar object.

The callback takes as input a Calendar object and returns a URL.

This is the date format of a date stored in an input field. See the inputField option. Combine the characters in the string passed to ifFormat to describe the date format.

For example,

ifFormat : "%a, %b %e, %Y";

formats the date as Mon, Apr 24, 2006.

The following table lists the characters used to define a date format.

The am/pm and AM/PM formats designated by %p and %P are provided automatically only when the the English language file (calendar-en.js) is used. For other languages they are ignored by default. However, if you want to include this functionality for another language, add the following line to the language file you are using:

Zapatec.Calendar._TT._AMPM = {am : "am", pm : "pm"};

You can also customize the string that is displayed for am and pm by editing it; for example:

Zapatec.Calendar._TT._AMPM = {am : "morning", pm : "afternoon"};

This is the ID of or DOM element reference to the input field that contains the selected date.

This option is required, if you don't use the flat calendar.

In a calendar that displays multiple months, monthsInRow controls the calendar layout. This argument is the number of months to be displayed in a single row. For example, for a calendar displaying six months, choosing 3 generates a calendar with two rows, three months in each row. However, choosing 2 generates a calendar with three rows, two months in each row.

This option allows users to select multiple days in a calendar. It also permits multiple dates to be selected programatically. The array of dates stores the selected dates.

If a calendar is created with the multiple option, the user must close it by clicking its close button.

The array of dates can be sorted. For more information, see sortOrder option.

This option hides the calendar close button. The default is false.

This option turns off the Help question mark (?) that normally appears in the top left corner of a calendar. If noHelp is true, the question mark is not displayed. The default is false.

This option sets a calendar that contains multiple months. The argument is a value between 1 and 12 specifying the number of months to be displayed.

See also the vertical option.

This is an optional function to be invoked when the calendar is closed.

This is an optional function to invoke when a date is selected. If this option is defined, the function must handle the "click-on-date" event.

Usually, the default handler works for most applications.

This is an optional function to invoke when the date is updated in the input field.

As input, the function takes a reference to the calendar after the target field has been updated with a new date.

This feature is useful for chaining two calendars. For example, you can set up a default date in the second calendar based on the date selected in the first.

This option specifies the [x, y] coordinates of the calendar position relative to the top-left corner of the page. If not used, the calendar is positioned on the basis of the align option.

This option specifies the range of years covered by the calendar.

The argument is an array of two integers. The first [0] is the first year allowed in the calendar, and the second [1] is the last year allowed. The default is [1900, 2999]. You can also specify month: [1999.09,2007.03] - this means from September of 1999 to March of 2007.

This option saves the current date in a cookie. The argument is the number of days that the date will save.

When users return to the web site, this option allows the calendar to populate the date field with the saved date.

If this option is true, the calendar displays days from months adjacent to the current month. Calendars that display days from other months always display six weeks. Calendars that do not display days from other months sometimes display five weeks and at other times six.

Valid parameters are true, false, or "seconds".

If this option is true, the calendar displays the date and time to the nearest minute.

If "seconds", the calendar displays the date and time to the nearest second.

If it is false, the calendar displays only the date.

If this option is true, a single click submits an action in a calendar.

If it is false, double click is required to submit. In this case, rather than submitting the data when the user clicks a date, data is not submitted until the user double-clicks the same date

The default is true.

This option determines the order in which multiple selected dates are stored. It is valid only for a flat calendar in which the multiple option is true. See the multiple option.

Valid values are "asc" for ascending order, "desc" for descending order, and "none" for no sorting..

This option allows you to define the interval between years displayed in the year drop-down menus. For example, a value of 5 produces 1900, 1905, 1910, etc. The default is 2.

This is the time format. Valid values are "12" and "24". The default is "24".

This option sets the interval, in minutes, at which the user can change the time with a single click. Allowed values are: 1, 2, 3, 4, 5, 6, 10, 15, 30, 60, 120, 180, 240, 300, 360.

This option displays a title in a single-month or multi-month calendar. The title can be a simple string or a function that allows the title to be set dynamically.

The following example sets the title based on the current control month in a multi-month calendar.

Zapatec.Calendar.setup({
    ...
    titleHtml     : function(strTitle, month, year) {
        return "Control Month is " +Zapatec.Calendar.i18n(month, "mn")
    ...
    }

If this option is true and multiple months are displayed, the calendar displays the following month in the next row, instead of in the next column. Use this option with the numberMonths option.

The default is false.

If this option is true, the calendar displays the week numbers. The default is true.

Format: 2004-11-02 [45]

Zapatec.Calendar.setup({
    inputField     :    "sel1",     // id of the input field
    ifFormat       :    "%Y-%m-%d [%W] %H:%M",     // format of the input field
    button         :    "button1",  // What will trigger popup of the calendar
    showsTime      :     false      //don't show time, only date
});

Form elements include a label, a text box, and a button.

In the Basic Calendar, Single Click Demo, you can display the calendar by clicking the "..." button. You can select a year, a month, and a date with the mouse button or keyboard commands. Click the date you want to display with your mouse button or press the <Enter> key to select it.

Format: Tue, Nov 2, 2004 [03:12 PM])

Zapatec.Calendar.setup({
    inputField     :    "sel2",     // id of the input field
    singleClick    :     false,     // require two clicks to submit
    ifFormat       :    '%a, %b %e, %Y [%I:%M %p]', // format of input field
    showsTime      :     true,     // show time as well as date
    button         :    "button2"  // trigger button 
});

Form elements include a text box and a button set.

For additional information, see the Double Click, with Time Demo.