Sample Calendar 1

Using event images and hyperlinks, message boxes, holidays/alternate dates,
and exportable and print-friendly views

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

How this sample calendar was implemented

The first required JavaScript statements can go anywhere in the HTML page, as long as they are before the place where you want the calendar to appear.

<script src="crunched.js"></script>
<script src="events.js"></script>
<script src="external_date_functions.js"></script>
<script src="sample_common.js"></script>

The 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 other called scripts contain the event definitions, holiday/alternate date functions, configuration settings, and functions to get and format the holidays and alternate dates. It is not necessary to separate these into separate external files, but it does makes the calendar easier to maintain since some will need to be changed more often than others.

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

<script language="JavaScript">
<!--
// override default settings and those from the sample_common.js file here
showAltDate = true;
showHolidays = true;
showAltHoly = true;
DefaultFormat = "layer";
ExportPage = "sample_export.html";
PrintPage = "sample_print.html";
defaultMsgBox = "Note: Alternate dates and holidays here are not events and will not be included in event exports.<p>";
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 following optional lines override the default calendar settings to enable the display of holidays and alternate dates, specify the html files for the event export and print-friendly pages, and override the default message box text. 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.

The additional parts required to get the holidays and alternate dates are in the "external_date_functions.js" and "sample_common.js" scripts.

// map alternate date and holiday functions to user supplied functions here
altDateStyle = 2;
altMonthStyle = 1;
function getAltMonth(first, month, year, last) {
   var tmp = my_date(first, month, year, altMonthStyle) + " - " + my_date(last, month, year, altMonthStyle);
   return tmp;
}
function getAltDate(day, month, year) { return my_date(day, month, year, altDateStyle); }
function holidays(day, month, year) { return my_holiday(day, month, year); }
function getAltHoly(day, month, year) { return my_alt_holiday(day, month, year); }

This code from "sample_common.js" defines the four functions required to get holidays and alternate dates onto the calendar: getAltMonth, getAltDate, holidays, and getAltHoly. The latter three functions are given a specific date and return an appropriate text string to place on the calendar. The first function is given the first and last dates of a month and similarly returns an appropriate text string to place on the calendar. What these functions call to get these text strings will depend on the user-supplied external date scripts.

In this case the holiday and getAltHoly functions simply pass through to my_holiday and my_alt_holiday functions. The getAltDate calls a my_date function with an additional argument to get a corresponding alternate date in a specific format (day month) for the given date. The getAltMonth here is a little more complicated. It calls my_date twice to get corresponding alternate dates for the first and last day of the given month in a different format (month year) and returns both separated by a hyphen. You can choose to format the return text in whatever manner is appropriate for your calendar.

Had we called the Calendar( ) function without first defining any events, and without overriding any of the default configuration settings, we would have gotten a calendar with the following characteristics:

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.