Included with the script is an example page that exhibits the use of varying calendars on a Web page. The wizard provides an intuitive user-interface that generates source code and working calendar examples based on the visual selection of options through the various calendar and drag and drop parameter controls. The generated code may be copied and pasted into a new or existing HTML Web page file. The wizard provides customization of the calendar's essential functionality. However further customization will require examining the example page (ddcal.html) and reading through the information contained in the documentation.

Developers familiar with basic javascript may be interested in the capabilities of the calendar date/time picker through parameter passing. The wizard essentially generates the calendar code with parameter assigned values from the user-interface options. Each calendar instance can be assigned property values by calling function params(). The function receives an associative parameter array with the object property name identifier followed by a value assignment using the colon ":" operand. Note that the information below is useful to anyone implementing the calendar object either by use of the wizard to generate code or hard entering the code into Web page(s).

Example of parameter passing to the calendar object instance:

var calendar = new ddcal(); // create a calendar object
calendar.params({SKIN : 0, INPUT : 'dateobj', MASK : '%Y-%m-%d'}); // parameter passing
calendar.show(); // show the calendar

Example of calendar bound form inputs (date and time optional):

<input id = "dateobj" name = "dateobj" type = "text" value = "" readonly>
<input id = "timeobj" name = "timeobj" type = "text" value = "" readonly>

Calendar Parameters

The following parameters may be passed to objects by the above means:

Date Input Mask

• %d day (01 to 31)
• %D day (1 to 31)
• %m month (01 to 12)
• %M month (1 to 12)
• %Y year (1900 or 2099)
• %y year (00 to 99)
• %w week (Monday to Sunday)
• %W week (0 = Sunday, 6 = Saturday)
• %n day of year (001 to 366)
• %N day of year (1 to 366)
• %j month (January to December)

"%j %D, %Y" may display: "December 1, 2007"
"%3j. %D, %Y" may display: "Nov. 11, 2007"
"Day %N of Year %Y" may display: "Day 230 of Year 2007"
"%d-%m-%Y" may display: "03-09-2007" (Canadian format)
"%Y/%m/%d" ISO 8601 default format may display: "2007/08/23"

Time Input Mask

• %h 24 hour (01 to 23)
• %H 24 hour (0 to 23)
• %k hour (01 to 12)
• %K hour (1 to 12)
• %i minute (00 to 59)
• %s second (00 to 59)
• %p (AM or PM)

"%h:%i:%s" may display: "14:31:02"
"%K %p" may display: "6 PM"
"%H.%i" may display: "18.03"

ddcal provides prototype functions for further customization of the functionality pertaining to various events such as the onclick, onmouseover and onmouseout events of dates. Developers may expand the functionality of ddcal to include a fully featured calendar with event information related to specific dates. In other words, ddcal could be modified to function as an event-based calendar instead of a date and time picker Web page component.

Click here to download ddcal trial version.