Sample Calendar 2

Using event images and hyperlinks, altered image alignment, month specific message boxes,
no holidays/alternate dates, smaller date numerals, non-default colors, and altered hyperlink appearance

(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="messages.js"></script>
<script src="sample_common.js"></script>

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 }
.navlink { color:brown; text-decoration: none }
.eventlink { text-decoration: none}
-->
</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.

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
DateFontSize=4;
SpecialDay=0; // none
navColor="#F5DEB3"; //"wheat"
ColorBackground="#FFEFD5"; //"papayawhip"
imageAlign = "right"; // default event image alignment

// wrap common format tags around all event text (any embedded tags will supercede)
DefaultFormat = "layer"; //
DefaultLayerFormat = "<font face=\"serif\" size=2 color=\"green\"><center><b>|</b></center></font>";

ExportPage = "sample_export.html";
PrintPage = "sample_print.html";
// msgBox messages come from external messages.js script sourced above
Calendar( );
// -->
</script>

The first few lines override the default date numeral size, event image alignment and calendar colors. The next two lines define a default event text format and apply it to all non-hyperlinked event descriptions. The following two lines specify the html files for the event export and print-friendly pages.

The month specific messages for the message boxes are defined in the "messages.js" file.

AddMsgBox(200405,"May message number 1 - long",3);
AddMsgBox(200405,"May message number 2 - short");
AddMsgBox(200405,"May message number 3");

This portion of the "messages.js" file specifies that the first message (long) will be displayed if there is a message box consisting of at least three adjacent cells, the second message (short) will be displayed if the message box is smaller than three adjacent cells or if there is a second message box at the end of the month. The third message will only be displayed if there are messages boxes at the beginning and end of the month and the first one is too small for the "long" message. If there is no month specific message defined, it will display whatever is defined for "defaultMsgBox".

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.