Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Xin's Popup Calendar
Description: Xin's Popup Calendar script makes inputting dates into forms as easy as point-and-click. Your user simply selects the date from a popup calendar, and it's automatically entered into the designated form field. This is one of the absolute best script of its kind, with the following noteworthy features:

Customizable date format (ie: y/m/d, m/d/y etc)
Fully customizable interface (colors, popup window dimensions etc)
Accommodation for different languages other than English and English calendar format
Fully cross browser functional- IE4+/Win, IE5+/Mac, NN4x, N6+, Opera6+/Win and Konqueror3/Linux.

Step 1: Add the following script to the HEAD section of your webpage:

<script language="javascript" src="cal2.js"></script>
<script language="javascript" src="cal_conf2.js"></script>

Step 2: Insert the below sample form to the BODY section of page, which demonstrates how to modify your form to use Xin's Popup Calendar:

<form name="sampleform">
<input type="text" name="firstinput" size=20> <small><a href="javascript:showCal('Calendar1')">Select Date</a></small>
<p><input type="text" name="secondinput" size=20> <small><a href="javascript:showCal('Calendar2')">Select Date</a></small>

Step 3: Finally, the script above accesses two external .js files. Download Attach file, and upload the .js files "cal2.js" and "cal_conf2.js" to your webpage directory.

Configuring the script
There are a few steps to configuring this script for your own webpage. Here are the skeleton procedures (for more comprehensive documentation, please see "readme.htm" inside the above zip file):

1) All changes to the script are made inside the single file "cal_conf2.js". Open up this file using your favorite text editor, and for each calendar you wish to add, add the line:

addCalendar("Calendar1", "Select Date", "firstinput", "sampleform");

-"Calendar1"- The unique name of your calendar. Can be anything desired, but must be unique for each calendar.
-"Select Date"- The title of the popup window of the calendar. Can be anything desired.
-"firstinput"- The name of the form INPUT field that will use this calendar.
-"sampleform"- The name of your form that contains the above INPUT field.

2) Having defined the above, here's what your form should look like:

<form name="sampleform">
<input type="text" name="firstinput" size=20> <a href="javascript:showCal('Calendar1')">Select Date</a>

The parts in red highlight how you would name your form/form element in response to how you specified addCalendar() above, plus set up the corresponding link to pop up the calendar.

Author: Xin Yang

Attached Files
.zip (Size: 9.6 KB / Downloads: 5)

Possibly Related Threads…
Thread Author Replies Views Last Post
  Dynamic Calendar II chitika 0 5,998 02-19-2008, 08:04 PM
Last Post: chitika

Forum Jump:

Users browsing this thread: 1 Guest(s)