So you have decided that it would be useful to provide an option on one of your pages that allows visitors to your site to display a calendar. Well you're in luck because I have one here that I am giving you permission to use on any non-commercial web site that you may have provided that you do not change any of the code within the calendar function itself. If you have a commercial website you may still use the script (subject to the same conditions) in return for a donation toward the cost of my maintaining this site. You may wish to make changes to the colours used in the pop-up so these have been loaded into variables outside of the function.
As I am providing the code to do the calendar popup for you, rather than go into detail on how the code works, I will instead concentrate on how you can link the calendar to your page.
So there are a number of different ways that you can use this function. If you just want to use it to display the calendar for the current month you can do it either in one of several ways. To always display the calendar when people visit your page add the following to the body statement in your page source:
<form>text<input type="button" value="Display Current Calendar" onclick="calendar(0,0);return false;" /> text</form>
Yet a third way to link to the Current Calendar is via an ordinary text link. To do this you need to place the following code in the location in your page source where you want the link to be:
<a href="#" onclick="calendar(0,0);return false;">Current Calendar</a>
If you want to allow your visitor to display a month other that the current month then you need to provide some means for them to select the month and year to display. For example:
The code to provide the above form is as follows:
<table class="centre" cellpadding="0" cellspacing="5" border="0">
<option value=" " />
<option value="1" />January
<option value="2" />February
<option value="3" />March
<option value="4" />April
<option value="5" />May
<option value="6" />June
<option value="7" />July
<option value="8" />August
<option value="9" />September
<option value="10" />October
<option value="11" />November
<option value="12" />December
<td><input type="text" name="yy" value="" size="5" maxlength="4" /></td></tr>
<tr><td colspan="2" class="centre"> <br />
<input type="button" value="Display Calendar"
onclick="calendar(form.yy.value,form.mm.options[form.mm.selectedIndex].value);return false;" /></td></tr>
There are many other ways that you can link the pop-up calendar to your page by coding the appropriate HTML codes. The above examples should help you to figure out how to link the function in to your page the way that you want.
This article written by Stephen Chapman, Felgall Pty Ltd.