Creating a Calendar Pop-up

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.

First get a copy of the external javascript provided in calendar.js and amend the colours to meet your requirements. This javascript contains the calendar function which you pass the year and month for which you want to display the pop-up calendar. A value of zero passed in either field will default to the current year and/or month. The current day of the month will be highlighted regardless of which month is being displayed. The function will also validate that a year between 1901 and 2100 (inclusive) has been entered and that the month number entered represents a valid month. You link this javascript to your page by adding the following statements to the head section of your page source:

 <script type="text/javascript" src="calendar.js">

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:

 <body onload="calendar(0,0);"> 
Alternatively you can add a single button to your page that when clicked will display the calendar by including the following code in your page source at the point where you want the button to appear:
 <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">
<tr><td class="right">Month</td>
<td><select name="mm">
<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
<tr><td class="right">Year</td>
<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,[].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.

go to top

FaceBook Follow
Twitter Follow