|
Usage:
# To prepare the HTML page:
1. Put the following lines within the <HEAD> section:
<script src="cal.js"></script>
<script src="cal_conf.js"></script>
You will define the calendar(s) and the settings in the "cal_conf.js", the name of the file doesn't matter though.
You don't have to put the "cal.js" and "cal_conf.js" under the same directory of the HTML page, as long as you can specify the web path for them in the src.
2. Put the following line near the form field which is to store the date picked from a pop up calendar:
<span id="CalendarID" style="position:relative;"> </span>
This line will make a layer which is used as a position mark for the calendar to pop up.
3. For the form field to store the date selected, make it this way:
<input type="text" name="CalendarFormFieldName" value="..." size="..." onfocus="this.blur(); showCal('CalendarName')">
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. For more form fields, repeat 2. and 3. with different calendar IDs, field names and calendar names.
4. As an alternative to 3., you can 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>
# To setup the calendar(s):
The following function calls should be put into the "cal_conf.js", and the settings sampled here are the default settings.
1. To add a calendar:
addCalendar("CalendarName", "CalendarID", "CalendarFormFieldName", "CalendarFormName");
If you have more than one form field defined above, repeat the "addCalendar()" call with the calendar names, calendar IDs and form field names specified.
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(96, 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(96, 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(96, 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(96, 1, 12, 1)" call is to define the width of a day cell in pixels.
The last paramenter in the "setWidth(96, 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.
# 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.
|