PopCal - The C-o-o-lest Pop Up Calendar! (http://jsutils.sourceforge.net/popcal/)

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:

"KEY1=value1;KEY2=value2;KEY3=..."

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.

popCal(this.form.date3,'DATEFORMAT=yyyy-mm-dd;CELLSIZE=36;WEEKHEAD_SIZE=3')

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.

KEY Description

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.

MINYEAR
MAXYEAR Minimum and Maximum Year. Range of years allowed for navigation and selection within the calendar.
'MINYEAR=2000;MAXYEAR=2010'

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.
'Y2KYEAR=50'

CELLSIZE
WEEKHEAD_SIZE 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.
'CELLSIZE=36;WEEKHEAD_SIZE=3' CELLSIZE WEEKHEAD_SIZE Remark 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=images/' 'IMGDIR=/home/images/' 'IMGDIR=http://someserver.com/home/images/' 'IMGDIR=' (in case images are in the same directory as the html file)

MONTHS
WEEKS 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.
'MONTHS=Janvier,Février,Mars,Avril,Mai,Ju...,Décembre' 'WEEKS=Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi'

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.

KEY	Description
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.
MINYEAR MAXYEAR	Minimum and Maximum Year. Range of years allowed for navigation and selection within the calendar. 'MINYEAR=2000;MAXYEAR=2010'
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. 'Y2KYEAR=50'
CELLSIZE WEEKHEAD_SIZE	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. 'CELLSIZE=36;WEEKHEAD_SIZE=3' CELLSIZE WEEKHEAD_SIZE Remark 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=images/' 'IMGDIR=/home/images/' 'IMGDIR=http://someserver.com/home/images/' 'IMGDIR=' (in case images are in the same directory as the html file)
MONTHS WEEKS	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. 'MONTHS=Janvier,Février,Mars,Avril,Mai,Ju...,Décembre' 'WEEKS=Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi'
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