My original calendar script was developed gradually over a number of years and JavaScript could do more with web pages, so could the script. From a simple popup displaying the calendar for a specific month the script was developed so that the month being displayed could be changed by the person viewing it and also so it could be embedded into the current page if desired.

Looking at that code with the idea of adding of adding further features made me realise just how outdated the code in the script had become even with the rewrites that had brought the script at least slightly more up to date than it was originally. Writing a modern JavaScript example of how to create a complete table in JavaScript gave me a starting point for an entirely new approach to producing a calendar script. This script like the original was developed in stages but unlike the original where the extra functionality was added every few years when it became possible, this script has been developed over just a few months with each part of the script being fully functional. The actual toCalendar method was developed first and provides a simple way to display a calendar for any month simply by attaching that method to the built in Date object and then calling the method for any date you want to display the calendar for. That method was then extended to allow an array of holiday dates to be supplied which can be highlighted in the calendar as well as being able to set a flag to indicate that the actual date the method is called for is not highlighted. This method by itself will allow you to display calendars easily for whatever month you wish and also to highlight whichever days in the month you wish. The highlighted dates don't have to be holidays, you could use it to display a calendar that highlights the dates that a given event is on.

Since the original calendar script had links added to allow the month displayed to be changed I decided to add this functionality to the calendar but rather than build it into the toCalendar method, I have created it as a separate option where the links are attached to the page separately so as to give maximum flexibility.

Since an array of holiday dates could get quite large depending on how many years you wanted to cover, I slightly modified the toCalendar method so that it will accept a functiona> as an alternative to the array of holiday dates. As long as the function accepts a year as its one parameter and returns an array of dates in the correct format it allows you to dynamically generate the array of holiday dates provided that you can work out appropriate formulae for calculating which dates in a year would normally be holidays.

The complete script is demonstrated below and so you can get a better idea of what it looks like by itself it can also be viewed separately.

If you want to be able to display calendars easily on your own site you are welcome to download the calendar script and to either use the toCalendar function separately or to use that and the main script that adds the buttons either with a fixed array of dates to be highlighted or with a modified version of the holidays function that generates the holiday dates for your location.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow