Sample Calendar 4

Using default settings with American holidays added automatically and
style sheet directives to alter appearance of hyperlinks

(An explanation of how this sample calendar was implemented is given below the calendar.)

How this sample calendar was implemented

The first required JavaScript statement can go anywhere in the HTML page, as long as it is before the place where you want the calendar to appear.

<script src="crunched.js"></script>
<script src="holidays.js"></script>

This first statement instructs the client browser to download the "crunched.js" file which contains the code for the JavaScript Event Calendar. You should not need to modify this script since you can control activation of calendar features and formatting by overriding settings for the configuration variables. You can use either "layercalendar.js" or "crunched.js" which is a compressed version for faster performance.

The second statement instructs the client browser to download the "holidays.js" file which contains the "holiday()" function used by the calendar script to get an appropriate text string if a given date is a holiday. This version contains functions for the calculating most American holidays. In its header section, it also contains references to sites with functions for calculating Christian and Jewish holidays should you wish to add them.

These holidays are NOT events so they will not be included in event exports. They will also not have any associated hyperlinks or images unless you embed them in the text returned from the "holiday()" function. Alternatively, you could insert a blank event on the same date with an associated image. The format of these holiday strings is controlled by the format tags assigned to the "HolidayFormat" setting.

The following Cascading Style Sheet (CSS) directives override the default appearance of hyperlinks on the calendar for browsers which obey these directives.

<STYLE TYPE="text/css">
<!-- Try css directives (for browsers which accept them) to alter appearance of hyperlinks in calendar
A:hover { color:#FF0000; text-decoration: underline font-weight: bold }
A.navlink { color:brown; text-decoration: none font-weight: bold }
A.eventlink { text-decoration: none}
A.greenlink { color: green; text-decoration: none}
A.purplelink { color: purple }
-->
</STYLE>

These directives instruct the client browser to display calendar navigation hyperlinks in brown with no underlining, event hyperlinks in the usual color with no underlining, and hovered hyperlinks in red with underlining. Any hyperlinks assigned to the "greenlink" or "purplelink" classes will be set to the corresponding color and attributes.

The second required piece of JavaScript goes at the exact spot in the page where you want the calendar to show.

<script language="JavaScript">
<!--
defaultMsgBox = "This is a <a href=green.html class=greenlink>Green</a> hyperlink;
this one is <a href=purple.html class=purplelink>Purple</a></br>";
showHolidays = true;
Calendar( );
// -->
</script>

The first line indicates the beginning of an in-line JavaScript program. The second line is a trick to make sure that older versions of browsers (that don't understand JavaScript) don't "blow up"; they'll simply ignore the rest of the script. The "defaultMsgBox" line just defines some message box text for testing style directives. The "showHolidays" line tells the calendar script to check each date using the "holiday()" function and to include any text string returned. The next line is the important one because it actually displays the calendar. The final two lines that follow complete the trick for older browsers and end the script.

Before attempting to implement the JavaScript Event Calendar on your own web page, it would be a good idea to study ALL of the examples.