Go to Javascript Utilities Home | Go to PopCal Home
PopCal - The C-o-o-lest Pop Up Calendar!    (http://jsutils.sourceforge.net/popcal/)


The C-o-o-lest Pop Up Calendar!

PopCal Usage

Including popCal() in your page

Step 1

Include the following lines in your html code (preferably in the <HEAD> section).
<script src="js/popcal_config.js"></script>
<script src="js/popcal_lang.js"></script>
<script src="js/popcal.js"></script>
The second js file (popcal_lang.js) is required only if non-English calendars are required.

Step 2

Associate the function popCal(field,params) to an appropriate event.

For <INPUT> buttons it would be of the form:

<form name=frm1>
<input type=text name=date1 value="April 9, 2003">
<input type=button value="..." onclick="popCal(date1)">
For anchors/hyperlinks (<A>) it may be called as below:
<form name=frm1>
<input type=text name=date1 value="April 9, 2003">
<A href="javascript:popCal(date1)">Link or Image here</A>

popCal() function Inputs

popCal() takes two inputs, the date field element and a parameter string. Both fields are optional as explained below.

The field parameter

The field parameter can be an input text form field. You can pass the actual object say frm1.date1 or the same within quotes "frm1.date1". The second is useful if you need to construct the argument from say, a variable. Eg.: popCal(frmname + ".date" + num)

If a non-form element such as <DIV>, <SPAN> etc. needs to hold the returned date info, pass the ID for the field name (as in the example below):

Birthday: <span id=bday1></span> 
<a href="javascript:popCal(bday1)">Change</a><br>
If a field has not been specified or has been put as null, then the preceeding input element is assumed to be the input date field. This can be very handy since mostly the link/button for changing the date would immediately follow the input text box.

The params string

The params string is a very powerful means for setting any or all of the configurable parameters for the pop-up calendar. It is of the form:
The value(s) MUST BE specified WITHOUT quotes (leading/trailing single or double quotes normally used to denote a string). If the value contains single or double quotes these might need to be escaped with a backslash (\' or \"). Semicolon (;) is used as the separator between parameters and hence should not be contained within the key-value pair.

Th params argument is optional. Default parameters as specified in the popcal_config.js file is assumed for any parameter not passed through the params argument of the popCal function. In other words, settings in the config files are applicable to all calendars but can be over-ridden using the params argument.

The following table gives a list of the supported parameters.
DATEFORMAT Format in which the date is displayed when the user chooses a date.
Param   Meaning                     Eg: For Sun, Jan 7, 2001
d       Day without zero            7
dd      Day with zero               07
m       Month without zero          1
mm      Month with zero             01
mmm     Three-letter month name     Jan
mmmm    Full month name             January
y       Year without zero           1
yy      2-digit year format         01
yyyy    4-digit year format         2001
ww      Two-letter week name        Su
www     Three-letter week name      Sun
wwww    Full week name              Sunday

Note: It is necessary to specify formats for at least
      the month and year. Day & Week are not mandatory.
Minimum and Maximum Year. Range of years allowed for navigation and selection within the calendar.
Y2KYEAR The Y2KYEAR (Y2K = Year 2000) parameter is used when determining whether a two digit year belongs to the 19th or 20th century. A value of 30 for example would take years from 00 to 29 as 2000 - 2029 and year values from 30 to 99 as 1930 to 1999.
CELLSIZE gives the size of a cell in pixels. Increasing this would increase the calendar window size.

WEEKHEAD_SIZE specifies the size in characters of the Week Headings. For example in the calendar header Wednesday would appear as "We" if this parameter is 2 and "Wed" if it is 3. For showing the full name of the weekday (Wednesday), give a value bigger than the biggest weekday name say, 20.


32        2                 Small size
36        3                 Medium size
80        20                Huge size
IMGDIR The parameter IMGDIR parameter sets the location of the path were the calendar related images (the gif files found under the 'images' folder of the distribution zip. Specify the path with respect to the location of calling page (not the js file location).

Take care to end the path with a slash (/)

The best way is to specify a complete path (relative to the root folder or the full http path) in the config file itself so that this parameter need not be changed for each popCal() call.

'IMGDIR='  (in case images are in the same directory
            as the html file)
MONTHS and WEEKS parameters can be used to specify week names in other languages or even in another case (I mean lower case, upper case etc.). The parameters are specified as a continuous comma (,) separated set of month or week names. All 12 months if specifying MONTHS and all 7 weekdays if specifying WEEKS should be given.
Various Status Bar text parameters
CALENDAR_TITLE      = Text displayed in the title bar
TODAY_TEXT          = Text displayed on the TODAY button
BLANK_TEXT          = Text displayed on the BLANK button
PREV_YEAR_TEXT      = Previous Year (<<) status message
PREV_MONTH_TEXT     = Previous Month (<) status message
NEXT_YEAR_TEXT      = Next Year (>>) status message
NEXT_MONTH_TEXT     = Next Month (>) status message
SELECT_MONTH_TEXT   = Choose a Month status message
SELECT_YEAR_TEXT    = Choose the Year status message
GO_TO_TODAY_TEXT    = Go to Current Month status message
SET_BLANK_DATE_TEXT = Enter a Blank Date status message
CLOSE_CALENDAR_TEXT = Close this Window status message
DEFAULT_STATUS_TEXT = Text displayed by default in ststus bar
Please note that if the parameters are specified incorrectly, the Calendar might not function properly.

Copyright © 2004 Arun Narayanan