Download JavaScript Code Examples, Tutorials, Reference

Usage:

• Copy and paste the necessary code into your page (see Installation Instructions).
  
  
• Edit the style sheet declarations to suit your taste.
  
  
• Either use a hyperlink or button "onclick" event handler to bring the calender up. You need to pass the textbox form element to the function.
  
  Lets say you have a form named f1, and in that form you have a textbox named t1; you would pass document.f1.t1 to the showCalender() function like this: showCalender(document.f1.t1). This is so the function knows where to get the date string from and where to put the result. Omitting this value will result in an error.
  
  See the 2 examples below to help demonstrate this:
  
  Form button:

  <form name="form_name1">
  <input type="text" size="12" value="" name="text_name1">
  <input type="button" value=" ... " onclick="showCalender(document.form_name1.text_name1)">
  </form>
  

  Hyperlink:

  <form name="form_name2">
  <input type="text" size="12" value="" name="text_name2">
  <a href="javascript:showCalender(document.form_name2.text_name2)">(Link text)</a>
  </form>
  

• Using the calender itself is pretty easy. Just use the little arrow buttons to scroll through the months and years. When you get to the date you want, simply click that date. The date you picked will appear in the textbox you specified. You can cancel by clicking the little in the calender's upper right corner.

Notes:

• Drag and drop is supported. Use the titlebar as the handle.
  
  
• Supported dates are from 1970 to 2020.
  
  
• Proper checks are done for Leapyear conditions.
  
  
• The calender has a semi-transparent shadow lending it a sense of depth. If the calender happens to cover other page content, you will be able to see the content through the shadow. This works in both IE4+ and NS6+.
  
  
• There are error checks to prevent errors if someone puts an invalid date in the textbox. The script will try to use this date, but if it can't, it will put in today's date instead and let the user know with a little message in the bottom of the calender.
  
  
• The current day (or the initial day taken from the textbox) will be highlighted in a different color.
  
  
• Most colors, fonts, and sizes are controlled via the style sheets. Changes can be made there. I recommend only changing the colors though since all the fonts and sizes are already otpimized. Below is a brief rundown of the style sheet classes and what they affect:
  
  
  • calShadow - Controls the semi-transparent shadow underneath the calender.
  • calMain - Controls the containing element for the calender.
  • calMonthYear - Controls the area where the month and year values change.
  • calHdr - Controls the days of the week area.
  • calToday - Controls the way today's date looks in the calender.
  • calText - Controls the way all the other dates look in normal state.
  • calTextH - Controls the way all the dates look when the mouse hovers over them.
  
  
• This script only works in IE4+ and NS6+. NS4.x is not supported, but no errors will be generated.
  
  
• This script sets a few event handlers. If you presently have a script(s) that use these too, you'll have to combine them. There is a section on this topic in my FAQ page. I have placed javascript comments in the script showing where to add these other commands to make it easier for you.

Installation:

Calender

S	M	T	W	T	F	S