1. Technology

Calendar Popups

2. Which Calendar

clr gif
Join the Discussion

Questions? Comments?

More of this Feature

The Script In Page

The script containing the calendar function is set up to allow you to pass the year and month which you want to display in 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.

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:

Month
Year

The code to provide the above form is as follows:

<form>
<table align="center" cellpadding="0" cellspacing="5" border="0">
<tr><td align="right">Month</td>
<td><select name="mm">
<option value=" " />
<option value="1" />January</option>
<option value="2" />February</option>
<option value="3" />March</option>
<option value="4" />April</option>
<option value="5" />May</option>
<option value="6" />June</option>
<option value="7" />July</option>
<option value="8" />August</option>
<option value="9" />September</option>
<option value="10" />October</option>
<option value="11" />November</option>
<option value="12" />December</option>
</select></td></tr>
<tr><td align="right">Year</td>
<td><input type="text" name="yy" value="" size="5" maxlength="4" /></td></tr>
<tr><td colspan="2" align="center"> <br />
<input type="button" value="Display Calendar"
onclick="calendar(form.yy.value,form.mm.options
continued from previous line[form.mm.selectedIndex].value);return false;" /></td></tr>
</table></form>

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.

Of course we may not want the calendar to appear in a popup window, we may prefer to have it appear within the current page.

The Script | Which Calendar? | In Page

Note that the script and the descriptions of how it can be called are copied from the "Ask Felgall" website with the permission of the copyright owner.

Related Video
Make your Own Calendar with Microsoft Publisher
How to Create a PHP Calendar

©2014 About.com. All rights reserved.