Xin's Popup Calendar Script- Installation and customization info (Copied from original, by Xin Yang):

# To prepare the HTML page:

1. Put the following lines within the <HEAD> section:
<script language="javascript" src="cal2.js">
/*
Xin's Popup calendar script- Xin Yang (http://www.yxscripts.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/
</script>
<script language="javascript" src="cal_conf2.js"></script>

You will define the calendar(s) and the settings in the "cal_conf2.js", the name of the file doesn't matter though.

You don't have to put the "cal2.js" and "cal_conf2.js" under the same directory of the HTML page, as long as you can specify the web path for them in the SRC.

2. For the form field to store the date selected, just make it a normal one:
<input type="text" name="CalendarFormFieldName" value="..." size="...">

You can put in a date string, in a supported format, as the initial value. The SIZE depends on the date string format you decide.

3. Use a link or your own Javascript codes to pop up the calendar. For the link, make it this way:
<a href="javascript:showCal('CalendarName')">...</a>

This link is kind of like a position mark for the calendar window to pop up, so put it close to the date field.

# To setup the calendar(s):

The following function calls should be put into the "cal_conf2.js", and the settings sampled here are the default settings.

1. To add a calendar:
addCalendar("CalendarName", "CalendarWindowTitle", "CalendarFormFieldName", "CalendarFormName");

If you have more than one form field defined above, repeat the "addCalendar()" call with different calendar names and their form field names.

If your HTML page only has one FORM, then you can leave the CalendarFormName blank(""), otherwise, specify the form names accordingly.

2. To define the font:
setFont("verdana", 9);

3. To define the calendar width:
setWidth(90, 1, 12, 1);

When a calendar pops up, it will show its current year and month as the title, along with arrow symbols to choose the previous/next year or month.

The first parameter in the "setWidth(90, 1, 12, 1)" call is to define the width for the title in pixels. You can adjust it to test different fonts and font sizes.

The second parameter in the "setWidth(90, 1, 12, 1)" call is to define whether to show the year and month in one line or two lines. You can use 1 or 2 here. If you use two lines, you will have arrow symbols for both year and month so that you can scroll them individually.

The third parameter in the "setWidth(90, 1, 12, 1)" call is to define the width of a day cell in pixels.

The last paramenter in the "setWidth(90, 1, 12, 1)" call is to define how you want the days in short. Usually you will use 1 or 3 here, so Sunday will be shown as "S" if you use 1, or as "Sun" if you use 3.

4. To define the background colors:
setColor("#cccccc", "#cccccc", "#ffffff", "#ffffff", "#333333", "#cccccc", "#333333");

Just play with the background colors above.

5. To define the font colors:
setFontColor("#333333", "#333333", "#333333", "#ffffff", "#333333");

Just play with the font colors above.

6. To define the date string format:
setFormat("yyyy/mm/dd");

To define a date string format, you will use "yyyy", "mm" and "dd" for the year, month and day in numbers, and use "DAY" for week day in format of "SUN", or "Day" for week day in format of "Sun", and "MON" for month in format of "JAN", or "Mon" for month in format of "Jan".

Single "/" is the default separator, but you can use any combinations of symbols(except for "yyyy", "mm", "dd", "day" and "mon") as separators or none, so you can have date formats such as "yyyymmdd", "Date: yyyy-mm(Mon)-dd", "mm dd, yyyy" and "Day. dd-Mon-yyyy is a good date", etc.

7. To define the popup window size and offsets:
setSize(200, 200, -200, 16);

The first two parameters, [200,200], define the size of the popup window, you might want to adjust them for different font and font size. The last two parameters, [-200,16], define the position offsets for the popup window. The script will detect where you click on the link, and apply the offsets before it pops up the calendar.

In this sample, an image link is used to pop up the calendar, the image link sits to the right of its date field and the calendar window has a size of 200x200 and is expected to pop up under the date field. Thus, basing on where you click the image link, -200 is to "move" the popup window to the left, and 16 is good enough to "move" the window down under the date field. You can adjust them for different form layouts.

8. To define week day format(optional):
setWeekDay(0);

Set to 0 to show Sunday first, or set to 1 to show Monday first for the week days.

9. To show the titles in another language rather than English(optional):
setMonthNames("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
setDayNames("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
setLinkNames("[Close]", "[Clear]");

Above are the default titles in English shown in the calendar. If you want to display another language, or display titles in another way, replace those English titles with titles in your own language. Of course, you might also need to adjust the font and digits for the day titles.

Please note that if your language uses double-byte characters, like Chinese, you should avoid using the "day" and "mon" in the date format.

Following is a sample to set titles in Chinese:

setFont("宋体", 12);
setWidth(90, 1, 15, 2);
setMonthNames("一 月", "二 月", "三 月", "四 月", "五 月", "六 月", "七 月", "八 月", "九 月", "十 月", "十一月", "十二月");
setDayNames("日", "一", "二", "三", "四", "五", "六");
setLinkNames("[关闭]", "[清空]");

# Some useful functions:

Since you can define your dates in any format, the following Javascript functions help you to deal with them.

1. checkDate(CalendarName)

The "checkDate()" call returns 0 if the value of the form field that stores the date picked from the specified calendar passes the format checking, returns 1 if the value is empty or doesn't pass the checking, or returns 2 if the specified calendar is not defined.

Click here to test the first date field in this page.

2. getCurrentDate()

The "getCurrentDate()" call returns the current date as a string in the format you define with the "setFormat()" call.

Click here to show the current date.

3. compareDates(date1, date2)

The "compareDates()" call compares the two date strings given. If a date string given doesn't pass the date format checking, the string returned by the "getCurrentDate()" will be used. It returns 0 if date1 equals to date2, or -1 is date1 is earlier than date2, or 1 if date1 is later than date2.

Click here to compare the first two date fields in this page.

4. getNumbers(date)

The "getNumbers()" call returns an string array with the year, month and day parsed from the date string given. If you have something like "myNumbers = getNumbers(myDate);", then "myNumbers[0]" is the year, "myNumbers[1]" is the month and "myNumbers[2] is the day.

If the date given doesn't pass the format checking, it returns an array of three empty strings("").

Click here to show the numbers of the first date field in this page.

# Browser support:

This script should work with IE4+/Win, IE5+/Mac, NN4x, N6+, Opera6+/Win and Konqueror3/Linux.

# Update history

~~ The End ~~