# Zapatec DHTML Calendar Manual

## Chapter 1. Download the Zapatec DHTML Calendar Files

## 1. Downloading the Zip File

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.

## 2. Extracting zpcal.zip

1. On your computer, browse to the folder where you saved zpcal.zip file.

2. zpcal.zip contains a folder called zapatec that holds all the files you need to create your calendar.

3. Double-click zpcal.zip to extract it.

## Chapter 2. Create a Calendar Using the Wizard

You can create a Zapatec calendar with or without help of the wizard.

## 1. How Can the Wizard Help?

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.

## 2. Starting the Wizard

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

1. Navigate to your DHTML Calendar folder (zpcal).

2. Open the index.html file in the root directory.

3. Select the wizard link from the left menu.

## 3. Using the Wizard

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.

## 4. Theme and Language

1. Choose the language in which you want to present your calendar.

2. Select the theme you want for your calendar.

3. If you want a smaller calendar, select the check box labeled "Use the small version." Keep in mind that certain options, such as showOthers, may affect the calendar size.

   Preview the calendar on the screen as it changes with your selections. You can change your selections to view different themes and languages.

## 5. Basic Setup

### 5.1. First Day of the Week

Select the first day of week from the drop-down menu.

### 5.2. Display Week Numbers

Select this check box if you want your calendar to display week numbers. The calendar can calculate and display week numbers using the ISO 8601 standard.

### 5.3. Display Adjacent Months

Select this check box if you want your calendar to display days from the adjacent months. Calendars that display days from the adjacent months are fixed-size. They always display six weeks. Calendars that do not show days from the adjacent months display either five or six weeks.

### 5.4. Show Time

Select this check box to prompt users to enter time and a date.

### 5.5. Time Format

If the Show Time check box is selected, you can choose between 12-hour or 24-hour clock.

### 5.6. Year Step

The years can be displayed with a certain step after the next or previous years. The next or previous year is always the first one displayed, no matter how many steps you choose between years. This is useful for drop-down year menus.

## 6. Date and Time Formats

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

## 7. Multiple Months

You can configure a calendar to display multiple months simultaneously.

### 7.1. Number of Months

Enter or choose from the drop-down menu a value in the range from 1 to 12 for the number of months to be displayed in the calendar.

### 7.2. Control Month

In a calendar that displays multiple months, enter or select from the drop-down menu the number of the month in which the default date (usually, current date) is highlighted.

### 7.3. Months in a Row

This option controls the layout of a calendar that displays multiple months. Enter or select from the drop-down menu the number of months to be displayed in a single row. For example, for a calendar displaying six months, choosing the value 3 generates a calendar with two rows, three months in each row. However, choosing 2 Months in a Row generates a calendar with three rows, two months in each row.

### 7.4. Vertical Months

This check box applies only to calendars with more than one row and more than one column. If the check box is selected, the months are incremented vertically (February appears below January). If the check box is clear, the months are incremented horizontally (February appears to the right of January).

## 8. Test and Generate

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.

## Chapter 3. Quick Startup (Without Wizard)

This section describes how to create a calendar using HTML and Javascript. The user is enabled with the opportunity of creating a calendar manually.

Otherwise, you may follow the instructions to download and extract the Calendar files.

## 1. Project Files

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

### 1.1. The zpcal folder

This is the main directory containing all of the other directories and files.

### 1.2. The src folder

The src folder contains the JavaScript that makes the program work.

- calendar.js - the main program file that includes all other files

- calendar-core.js - the main core source for the calendar

- calendar-date-core.js - extension of Date object needed for the Calendar

- calendar-setup.js - helper function for quick setup

### 1.3. The demo folder

The calendar demos contain examples of the different types of calendars. The demos are a great resource for examples of usage and the underlying code.

### 1.4. The doc folder

The doc folder contains documentation to assist you with the Calendar design.

### 1.5. The lang folder

The language folder contains up all our supported languages to provide the greatest possible versatility and ease of use for your end-users. Supported languages include English, French, Spanish, Italian, Afrikaans, German, Finnish, Croatian, Hungarian, Italian, Romanian, Slovenian, and Turkish.

### 1.6. The themes folder

The themes folder contains the CSS files that control the look and feel of your calendar.

## 2. Set Up your Calendar

### 2.1. Insert the Headers

In your web editor (Dreamweaver, UltraEdit, etc.), open the web page in which you want to place the calendar. Position a cursor before the ending </head> tag. Paste the following style path and script paths before the ending </head> tag:

    <!-- Javascript Zapatec utilities file -->
    <script type="text/javascript" src="utils/zapatec.js"></script>
    <!-- Javascript files to support calendar -->
    <script type="text/javascript" src="zpcal/src/calendar.js"></script>
    <!-- Javascript files to set the language for the calendar -->
    <script type="text/javascript" src="zpcal/lang/calendar-en.js"></script>
    <!-- CSS file for specifiying the theme -->
    <link rel="stylesheet" type="text/css" href="zpcal/themes/winxp.css"/>

You can set another language for your calendar by choosing a different language file from the lang folder.

You can substitute a different theme for the calendar by choosing a different CSS file from the themes folder. Specifying a CSS file in the headers is mandatory to support the Calendar.

### 2.2. Path Warning

If your web page containing the calendar is saved in the zapatec folder, these lines work without any changes. If, however, you save your web page to another location (for example, directly under your website root folder), you need to add the folder information before the file path so that your web page can process these files.

### 2.3. Upgrade Warning

If your version of Zapatec calendar is older than 2.0 and are now migrating to the current version, you need to adjust the header files.

The older utils.js is no longer supported; it has been replaced by zapatec.js. In addition, calendar-setup.js is no longer required. To upgrade, replace the old lines:

    <script type="text/javascript" src="utils/utils.js"/>
    <script type="text/javascript" src="src/calendar.js"/>
    <script type="text/javascript" src="lang/calendar-en.js"/>
    <script type="text/javascript" src="src/calendar-setup.js"/>
    <link rel="stylesheet" type="text/css" href="themes/winxp.css"/>

with

    <script type="text/javascript" src="utils/zapatec.js"></script>
    <script type="text/javascript" src="zpcal/src/calendar.js"></script>
    <script type="text/javascript" src="zpcal/lang/calendar-en.js"/></script>
    <link rel="stylesheet" type="text/css" href="zpcal/themes/winxp.css"/>

## 3. Create a Form with a Calendar

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.

### 3.1. Insert the Form Code

Assign a name "data" to the text box and give the button an id of "trigger".

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

Paste this code into the body of your document.

## 4. Insert the Calendar Code

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>

## 5. Copy Files to your Web Server

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

## 6. Test the Calendar Application

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.

## 7. Change Included Files

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

### 7.1. Change Theme

See "Insert the Headers" section where you included the winxp.css file from the themes folder. WinXP is one of the themes that comes with the Zapatec DHTML Calendar. You can choose among several themes by changing the file called by the path. Check the themes folder for more options.

For example, to use the WinXP theme, insert this line:

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

This produces a calendar with the WinXP theme, like the one in the Saving Dates in Cookies Demo.

Or to use the Green theme, insert:

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

for a calendar with the Green theme like the one in the Flat Calendar, Different Look for Special Days Demo.

### 7.2. Change Language

One of the lines you inserted in Section 3.2.1 was

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

This line controls the language in which your calendar is displayed. The file called here is calendar-en.js, the English file. You can choose among several languages by changing the file called by the path. For example, for French use

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

or for Italian:

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

Check the lang folder for more language files.

## 8. Events

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'>

## Chapter 4. Configuration Options

The previous section described how to create a calendar by inserting the `Zapatec.Calendar.setup` javascript code. You can customize your calendar by setting various options in the setup code.

This section describes the calendar configuration options.

One of the following options is required: inputField , displayArea or button .

## 1. align (string)

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:

- T — positions the calendar completely above the reference element; bottom margin of the calendar aligns with the top margin of the element

- t — positions the calendar above the element but may overlap it; bottom margin of the calendar aligns with the bottom margin of the element

- c — the calendar displays vertically centered to the reference element; might overlap it, depending on the horizontal alignment

- b — positions the calendar below the element but may overlap it; top margin of the calendar aligns with the top margin of the element

- B — positions the calendar completely below the element; top margin of the calendar aligns with the bottom margin of the element

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

- L — positions the calendar completely to the left of the reference element; right margin of the calendar aligns with the left margin of the element

- l — positions the calendar to the left of the element but may overlap it; left margin of the calendar aligns with the left margin of the element

- c — the calendar displays horizontally centered to the element but may overlap it, depending on the vertical alignment.

- r — positions the calendar to the right of the element but may overlap it; right margin of the calendar aligns with the right margin of the element

- R — positions the calendar completely to the right of the element; left margin of the calendar aligns with the right margin of the element

## 2. button (string or object)

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

## 3. cache (boolean)

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

## 4. canType (boolean)

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

## 5. closeEventName (string)

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

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

- The user clicks a date once, if the singleClick option is true

- The user double-clicks a date, if the singleClick option is false

- The user clicks the close button of the calendar (the x in the top right corner)

- The user clicks outside the calendar

## 6. controlMonth (integer)

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.

## 7. daFormat (string)

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".

## 8. date (date)

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

## 9. dateStatusFunc (function)

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:

- true - The date is disabled.

- false - No action is taken.

- string - The string is assumed to be a CSS class, which is appended to the date element.

- string containing the substring "disabled" - The date is disabled and presented in the style specified by the CSS class.

## 10. dateText (function)

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.

## 11. disableDrag (boolean)

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

## 12. disableFdowChange (boolean)

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

## 13. disableFunc (function)

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.

## 14. disableYearNav (boolean)

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

## 15. displayArea (string or object)

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

## 16. electric (boolean)

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.

## 17. eventName (string)

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

## 18. fdowClick (boolean)

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.

## 19. firstDay (integer)

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.

## 20. flat (string or object)

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>

## 21. flatCallback (function)

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.

## 22. ifFormat (string)

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.

%a | abbreviated weekday name
%A | full weekday name
%b | abbreviated month name
%B | full month name
%C | century number
%d | the day of the month ( 00 .. 31 )
%e | the day of the month ( 0 .. 31 )
%H | hour ( 00 .. 23 )
%I | hour ( 01 .. 12 )
%j | day of the year ( 000 .. 366 )
%k | hour ( 0 .. 23 )
%l | hour ( 1 .. 12 )
%m | month ( 01 .. 12 )
%M | minute ( 00 .. 59 )
%n | a newline character
%p | "PM" or "AM"
%P | "pm" or "am"
%S | second ( 00 .. 59 )
%s | number of seconds since Epoch (since Jan 01 1970 00:00:00 UTC)
%t | a tab character
%U, %W, %V | the week number
%u | the day of the week ( 1 .. 7, 1 = MON )
%w | the day of the week ( 0 .. 6, 0 = SUN )
%y | year without the century ( 00 .. 99 )
%Y | year including the century ( ex. 1979 )
%% | a literal % character

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"};

## 23. inputField (string or object)

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.

## 24. monthsInRow (integer)

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.

## 25. multiple (date[])

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.

## 26. noCloseButton (boolean)

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

## 27. noHelp (boolean)

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.

## 28. numberMonths (integer)

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.

## 29. onClose (function)

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

## 30. onSelect (function)

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.

## 31. onUpdate (function)

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.

## 32. position (array)

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.

## 33. range (integer [ ])

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.

## 34. saveDate(integer)

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.

## 35. showOthers (boolean)

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.

## 36. showsTime (boolean or string)

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.

## 37. singleClick (boolean)

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.

## 38. sortOrder (string)

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..

## 39. step (integer)

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.

## 40. timeFormat (string)

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

## 41. timeInterval (integer)

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.

## 42. titleHtml (string or function)

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")
        ...
        }

## 43. vertical (boolean)

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.

## 44. weekNumbers (boolean)

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

## Chapter 5. Calendar API

## 1. Public Methods

### 1.1. Calendar.create

This function creates the HTML elements needed to display the calendar. Call it after setting the calendar properties.

    calendar.create(); // creates a popup calendar

or

    calendar.create(document.getElementById(parent_id)); // creates a flat calendar

The function creates a pop-up or a flat calendar. If the parent argument is present (it should be a reference, not an ID, to an HTML element), a flat calendar will be created and inserted in the specified element.

Having provided a reference to a calendar object, you can use the boolean member variable `isPopup` to check if it is a pop-up or a flat calendar:

    if (calendar.isPopup) {
       // this is a popup calendar
    } else {
       // this is a flat calendar
    }

### 1.2. Calendar.callHandler

This function calls the user-defined onSelect callback with the required parameters.

### 1.3. Calendar.callCloseHandler

This function calls the user-defined onClose callback. It is useful for creating a "single-click" calendar that closes when a date is clicked.

### 1.4. Calendar.hide

Call this function to hide the calendar. It does not affect the calendar object and HTML elements. You can later call one of the show functions on the same element.

### 1.5. Calendar.setDateFormat

This function configures the format in which the calendar reports the date to the onSelect handler.

    calendar.setDateFormat("%y/%m/%d");

See the table for more details about configuring date format.

### 1.6. Calendar.setTtDateFormat

This function sets the format of the date displayed in the status bar when the pointer is hovering over a date. The format specification is similar to that of `Calendar.setDateFormat` .

### 1.7. Calendar.setDateStatusHandler

This function sets the callback for disabling and customizing specific dates and times. The callback returns a boolean or a string. If the return value is true, the date is disabled and the user cannot click it. If it is false, the date is enabled.

If the returned value is a string, the date gets an additional CSS class, which is the returned value. You can use this feature to highlight some dates. You are responsible for defining the CSS class that you return. If you return a string that contains "disabled", the date will be disabled, just as if you returned true. This feature allows to display disabled dates in a customized way.

For example, you could define .special in some of your styles or in the document header in a STYLE tag. Place this definition after the calendar styles are loaded:

    .special { background-color: #000; color: #fff; }

Then you should insert the following code before calling `Calendar.create()` . It adds the "special" class name to dates that are defined in the SPECIAL_DAYS table. Other dates will be displayed as default, enabled.

    // this table holds your "special" days, so that we can automatize
    // things a bit:
    var SPECIAL_DAYS = {
        0 : [ 13, 24 ],             // "special days" in January
        2 : [ 1, 6, 8, 12, 18 ],    // "special days" in March
        8 : [ 21, 11 ],             // "special days" in September
       11 : [ 25, 28 ]              // "special days" in December
    };

    // this function returns true if the passed date is special
    function dateIsSpecial(year, month, day) {
        var m = SPECIAL_DAYS[month];
        if (!m) return false;
        for (var i in m) if (m[i] == day) return true;
        return false;
    }

    // this is the actual date status handler.  Note that it receives the
    // date object as well as separate values of year, month and date, for
    // your comfort.
    function dateStatusHandler(date, y, m, d) {
        if (dateIsSpecial(y, m, d)) return "special";
        else return false;
        // return true above if you want to disable other dates
    }

    // configure it to the calendar
    calendar.setDateStatusHandler(dateStatusHandler);

You can disable specific times as well as dates using the `setDateStatusHandler`.

In the following example, the calendar calls the `timeOutOfRange` callback on two events: when the date changes and when the time changes. To see what event it is, check if the hours variable is defined. Here the user is limited to 11AM - 5PM on Saturdays and 8AM to 9:45 PM on Fridays.

    function timeOutOfRange(date, year, month, day, hours, minutes) {
     if (date.getDay() == 0) { //No Sunday
      return true;
     }
     if (typeof(hours) != "undefined") {
      if (date.getDay() == 6) {
       //only allow 11AM to 5PM on Saturday
       if (hours < 17 && hours >= 11) {
        return false;
       } else {
        return true;
       }
      }

      //on saturdays allow
      if (date.getDay() == 5) {
       //only allow 8AM to 9:45PM on Friday
       if (hours > 21 || hours < 8) {
        return true; //not within the hours
       }

       if (hours != 21) {
        return false; //within the hours
       }

       //hours = 21
       if (minutes <= 45) {
        return false;
       } else {
        return true;
       }
      }

     }
     return false;
    }

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

### 1.8. Calendar.show

Call this function to show the calendar. It sets the CSS display property to "block". It does not modify the calendar position.

This function is valid only for pop-up calendars.

### 1.9. Calendar.showAt

Call this function to show the calendar at the position specified by the passed [x, y] coordinates.

    calendar.showAt(x, y);

The parameters are the absolute coordinates relative to the top left corner of the page. They are page coordinates, not screen coordinates.

After setting the coordinates, the function calls `Calendar.show` .

This function is valid only for pop-up calendars.

### 1.10. Calendar.showAtElement

This function is used to display the calendar near a specific element.

    calendar.showAtElement(element, align);

where element is a reference to your element, such as the input field that displays the date. Align is an optional parameter, of type string, containing one or two characters.

Align can contain one or two characters. The first character determines the vertical alignment relative to the element, and the second character determines the horizontal alignment. For more details about the valid values and defaults for this parameter, see the description of the align option.

### 1.11. Calendar.setDate

This function sets the Calendar to the date passed in the parameter. This parameter needs to be a JavaScript Date object. If the calendar is visible, the new date is displayed immediately.

    calendar.setDate(new Date()); // go today

### 1.12. Calendar.setFirstDayOfWeek

This function changes the first day of week. The parameter is a numeric value ranging from 0 to 6. Provide 0 for Sunday, 1 for Monday, ..., 6 for Saturday.

    calendar.setFirstDayOfWeek(5); // start weeks on Friday

### 1.13. Calendar.parseDate

Use this function to parse a date represented as a string and to move to that date in the calendar.

The algorithm first tries to parse the date according to the format previously set with `Calendar.setDateFormat` . If that fails, it uses other methods to get a valid date.

    calendar.parseDate("2003/07/06");

### 1.14. Calendar.setRange

This function sets the range of years allowed in the calendar. You can also specify the month number.

    calendar.setRange(1970.02, 2050.05);

## Chapter 6. Sample Calendar Configurations

Here are two of the multiple different ways how you can present a calendar.

## 1. Basic Single Click Calendar

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.

## 2. Double Click with Time Calendar

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.

## Chapter 7. Side Effects

Here are some side effects that you may experience when the DHTML calendar code is embedded in an object:

1. The global variable window.calendar is initially set to null. This variable is used by the calendar code, especially when performing drag & drop for moving the calendar.

2. The JavaScript Date object is modified. We added some properties and functions that may be rather useful for our calendar. It made more sense to add them directly to the Date object than to the calendar itself.

   1. Date._MD = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

   2. Date.SECOND = 1000 /* milliseconds */;

   3. Date.MINUTE = 60 * Date.SECOND;

   4. Date.HOUR = 60 * Date.MINUTE;

   5. Date.DAY = 24 * Date.HOUR;

   6. Date.WEEK = 7 * Date.DAY;

   7. `Date.prototype.getMonthDays(month)` — returns the number of days of the given month, or of the current date object if no month was given.

   8. `Date.prototype.getWeekNumber()` — returns the week number of the date in the current object.

   9. `Date.prototype.equalsTo(other_date)` — compares the current date object with other_date and returns true if the dates are equal. This method ignores time.

   10. `Date.prototype.print(format)` — returns a string with the current date object represented in the defined format. It implements the format specified in section 5.1.5.