Event Calendar

Being able to display a calendar on your web page is often useful. Even more useful is allowing your visitor to select a date from that calendar and then display any event associated with that date.

Such a script will function best if a server side lookup is done to obtain the event to display for a particular date. This version of the event calendar doesn't look up the events on the server though (perhaps in the next version), instead it just has all the events stored in an array at the bottom of the script. To reduce the need for multiple entries that repeat each year the calendar also allows you to specify '0000' as the year for repeating entries. These repeating entries will not display where there is a specific entry for that date where the exact year is specified.

Here's what the event calendar looks like using my choice of colour scheme (there are also a number of options in the code to allow you to set your own.

This script makes use of my extended date object so the first thing that you need to do is to get a copy of that script. That script provides the functionality to display the calendar and also to format the date being displayed with the event in whatever format you like and so keeps the amount of code specific to this script to a minimum. All that this script needs to do is to display the buttons to switch between monthly calendars and to display the event associated with whatever date is selected. So with the date object script already saved the next step is to copy the code specific to this script and save it to a separate file.


Assuming that you saved the first script as dollarD.js and the second as eventcal.js they are then attached to into your page immediately before the </body> tag as follows:

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

You can change the div in the page that the script refers to in the parameters at the bottom of the script if you need to. The value specified in the supplied script is 'cal' and so if you don't need to change it then you would identify the spot in the web page where the event calendar is to appear using:

<div id="cal"></div>

The event calendar appearance is controlled with CSS. The following is used for the above example:

#cal table {border-collapse:collapse;}
#cal td {border:1px #000 solid;text-align:center;width:2em;}
#cal thead {font-weight:bold;background-color:#ccc;}
#cal caption {font-weight:bold;;font-size:1.5em;}
#cal td span {color: #00f; cursor : pointer;}
#cal #calevent {border:1px #000 solid;text-align:center; width:15em; height:3em;}
#cal .calbutton {display:inline-block; width:4.5em;}

If you changed the id at the bottom of the script and in your div then you'd also need to change all the #cal references in the CSS (the id for where the event is displayed is the same as the main id but with 'event' added to the end. You can also easily change any of the colours specified so that the calendar matches to the rest of your page. Changing any of the other style values may break the appearance of the calendar however you are welcome to experiment with different values if you want to attempt to make the script appear totally different.

The parameters that control the script are at the bottom of the code.

Very little of the code from my original event calendar script has survived into this version. The calendar is now produced by the extended date object and the date above the event message is no longer the first eight characters of the entry from the array. The calendar button display is now handled using a slightly modified version of the code described on the page Calendar Buttons. The only piece of the original script to survive is the few lines of code that look up the event in the array and that will be the section that I replace next if I change the script to do server side lookups of the event details.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow