Event Calendar

3. Customize the Calendar

The final step in using the event calendar script on your site is to customize it. There are two areas where you can customize this script. We'll start by looking at the colour scheme that the script uses.

If you locate the above section at the top of the Javascript code you can then change those values to change the colours that the event calendar uses to display.

Actually the first field has nothing to do with colours but determines whether the field showing the event appears above (t) or below (b) the calendar.

The colours I have used are specified using the standard hexadecimal format that the web uses where each two digits (each represented by a hexadecimal number 0123456789abcdef) represent the amount of red, green, and blue respectively in the colour (so #ff0000 is red, #00ff00 is green, and #0000ff is blue). You can use the alternate rgb(red, green, blue) or named colour notations if you prefer.

The colours that you can specify represent the background colour displayed behind the month/year at the top of the calendar (headbg), the background behind the selected date except where you just selected it (todaybg), the colour to display dates where there is no associated event (textclr) and those where there is (linkclr). There is also a field (noMessage) where you can enter a default message to display if there is no event associated with the selected date. (The only time this will actually get used is when the calendar is first displayed and there is no event for today.

The second part of the script that you will want to customize is the event array. These entries can be made using one of two formats.

This entry uses the 0000mmdd format to identify when the event is to be displayed. In this instance it specifieds the 1st january and so the event "New Year" will be displayed on that date every year unless a specific event for a particular year is specified in the array.

This entry uses the ccyymmdd format to specify that the event "New Event Calendar Started" is to be displayed only on the 10th June 2006. A 00000610 event message will display in other years on that date.

Note that when setting up these entries everything for an entry has to go on the same line. If you want to put line breaks inside of the event text you should specify them as <br> (the text is output to the page as HTML so you need to use HTML like breaks). Also if you are going to use a quote (") in the event text you need to precede it with a \ so that the Javascript code knows that it is a part of the text and not the end of the entry.