Universal JavaScript Calendar Control - Programmer Guide

Notes:

  1. For examples, refer to file calender.htm
  2. All functions and global variables used by Universal Calendar are prefixed with CAL, so that there is no clash with other scripts in your web pages.

Customizing Look (optional):

  1. Edit file calendar.css, to reflect the formatting changes you want. These will not interfere with the stylesheet for your web-page.
  2. a.MO: Formatting for links in the Month bar.
  3. a.DA: Formatting for links in the calendar (days).
  4. b.sun: Formatting for the Label for Sunday.
  5. b.mon: Formatting for the Label for Monday and the rest of days.
  6. body: Formatting for the calendar control itself. The font size and face should be exactly same as the one used for a.DA. Otherwise, some distortion can occur.
  7. To change the left/right button for the year, replace images l.gif and r.gif.

Including the Script in your Webpage:

Copy the following in the head part of the page.

<script language="JavaScript" src="calendar.js" type="text/javascript"></script>

Usage:

There are two modes of using the Universal Calendar.

  1. Simple (default): Bind the Calendar function to a text field, and let it do the parsing, editing and formatting. This would be sufficient most of the times.
  2. Controlled (programmed): Programmatically call the Calendar function, and specify a callback function to receive the final date selected. You should use this when you have validations to perform before date is finally inserted in the field. When using this mode, you may need to use the parsing and formatting functions provided with Univeral Calendar.
All the function calls are described below-

Function: CALgo

This function can be assigned to the onClick attribute of an element on the page. It should be used if greater programming control is required after the date is selected. Parameters:

  1. callback: The name of function that should be called when a date is selected. The function is passed 3 parameters -year, month and day. This is the name of the function and is a string parameter.
  2. X position: The X position of the window to be opened.
  3. Y position: The Y position of the window to be opened.
  4. Start year:
  5. End year: The range of years that is valid.
  6. Year:
  7. Month: The year and month on which the calendar should open.

Function: CALparse

This function is used to parse a date string. It is normally used with CALgo, where you take programming responsibility for date parsing and formatting. Parameters:

  1. string: The date string.
  2. format: The date format string. The date format is composed of date components and delimiters. The components can be dd, yy, yyyy, mm, mon, month, MON, or MONTH. The delimiters can be space, "/", or "-". A date format can not mix delimiters. 'mon' and 'month' stand for Capitalized 3-letter and full months names respectively. 'MON', and 'MONTH' represent full uppercase months names.
Returns:

Function: CALformat

This function is used to format a date string. It is normally used with CALgo, where you take programming responsibility for date parsing and formatting. Parameters:

  1. Year: The year.
  2. Month: The month (1-12).
  3. Day: The day of the month.
  4. format: The date format string. The date format is same as for CALparse.
Returns:

Function: CALbind

This function can be assigned to the onClick attribute of an element on the page. It is the simpler way of using Universal Calendar and should be used when you need the default behavior where it parses the contents of a text field, allows the user to edit it and then puts it back in the field. Parameters:

  1. Entry: The text field object, which is to be edited. Note that this is not a string value but the actual object. E.g. form.elements[i]).
  2. event: The event object that caused the onClick to take place. This is needed for calculating the position for placing the calendar window. It can be null, if so system uses a default position for the window.
  3. format: The date format to be used. If date parsing fails, the calendar opens at the current date.
  4. Start year:
  5. End year: The range of years that is valid.