JavaScript & Calendar Components III
 


Displaying Dates: Smart Calendar Components
Credit: Fuushikaden

Description
.This is another calendar control we look at particularly for its ease of coding.

Key features and JavaScript elements
Uses CSS and pop-up windows to build up calendar. The calendar component automatically fills in the associated form fields . Popcalendar is particularly useful because it supplies the field to be filled as a parameter

Calendar Setup: To use the calendar component you will need 2 subdirectories ( image and javascript) on your site where you will put the following files: images gets pcaldrop1, pcaldrop2, pcalleft1, pcalleft2, pcalrigh1, pcalright2 (note we added the prefix pcal to all the gif images supplied in order to insure no collision withthe names of other components' images). The javascript directory gets popcalendar.js

Next place the following line in the <head> block of your html file:

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

Using the Popcalendar Component

The popcalendar component is fairly easy to use because it supplies the name of the object that it will update. As well users get to supply a formating string that determines the exact format that the date information will be returned in.Here is the the exact calling sequence:

  showCalendar(control_called_from, control_displaying_date, format, lang, past, fixedx, fixedy )
where
   control_called_from - usually equals this, the name of the control showCalendar() is called from
   control_displaying_date - usually a form field, but any element whose value can be changed
   format - layout of the date the following values are recognized:
    a) d-day, no zero-padding; dd - zero-padded day when required
    b) yy - padded two digityear; yyyy - full, four digit year
    c) m - single digit for month; mm - zero-padded month when required
    d) mmm - month ompletely spelled out from January to December
    e) mmmm - ALL CAP 3-letter month from JAN to DEC
    f) tt - time in format hh:mm:ss; for example 11:35:39
   lang - two letter, lower case code for language to display in. This version defaults to en-English,
     but also supports de-German, and es-Spanish in the current version.
   past - set to zero and values before today's date are cisabled from being used;
   past = 1 means any date can be entered;
   fixedx = -1 indicates use the ontrol for display's x-coordinate for the calendar's positioning
   fixedx >= 0 is the pop calendars x-coordinate position
   fixedy = -1 indicates use the ontrol for display's y-coordinate for the calendar's positioning
   fixedy>= 0 is the pop calendars y-coordinate position
Here is another example of the use of Popcalendar:
  
Try clicking on it.

One of the advantages of the Popcalendar is its flexible formating. Users get to choose among several different display formats for day, month and year. But once chosen users have complete flexibility in choosing the order and separtor used in the date format string. So "dd/mm/yyy", "yyyy-mm-dd", or "mmmm dd, yyyy" are just a few of the valid date strings possible. Another nice touch is that by setting fixed= -1; and fixedy = -1; popcalendar then knows how to place the pop-up calendar window right next to the triggering control.

In sum, Popcalendar has the advantage of a fairly simple setup and straight forward calling sequence. However, it lacks some of the sophisticated date eligibility criteria that are available with the previous Lea Smart calendar. But Popcalendar has its own virtues including easy extensibility.
 
Top of Page  Tutorials Home  Javascript References  JavaScript Books