An Incredible Javascript Event Calendar

User Guide

»  Table Of Contents

Themes and the scrptcal.htm file

Section 2.1.0

As you have seen in the installation instructions, the Scriptcalendar iframe loads the scrptcal.htm from one of the theme folders. The theme folder houses a unique theme. Themes are a set of calendar properties and css classes working in unison to present the calendar. In order to begin configuring the calendar, you must select a theme.

The scrptcal.htm file is the most important file of the theme. The calendar functions by placing the "/themes/(theme name)/scrptcal.htm" HTML within the in-line frame tag you place on your HTML page. This integrates the calendar within your page layout. The HTML for the scrptcal.htm performs several functions.

  • Imports the "scrptcal.css" file, which is the CSS for the theme
  • Imports the "scprint.css" file, which is the printing CSS for the theme
  • Includes the "../../components/scrptcal.js" file containing the Scriptcalendar engine
  • Includes the "../../components/overlib.js" file containing 3rd party software for tooltips
  • Includes the "../../components/scevent.js" file containing the standard events
  • Includes the "../../components/scspcevt.js" file containing the special events
  • Includes the "schandlr.js" file containing the onMouseOver handling functions
  • Creates an instance of the scriptcalendar object and stores the reference in the variable "objCal".
  • Sets the various properties using the "objCal" variable.
  • Renders the calendar by calling the "initialize" method of the "objCal" variable.

Below is an example of a typical scrptcal.htm file. Notice how it performs all of the described duties.

An incredible javascript calendar
copyright 2005


<!-- do not edit unless you have moved the component javascript files -->
<style type="text/css" media="screen"> <!-- @import "scrptcal.css"; --></style>
<style type="text/css" media="print"> <!-- @import "scprint.css"; --></style>
<script type="text/javascript" src="../../sccomponents/scrptcal.js"></script>
<script type="text/javascript" src="../../sccomponents/overlib.js"></script>
<script type="text/javascript" src="../../sccomponents/scevent.js"></script>
<script type="text/javascript" src="../../sccomponents/scspcevt.js"></script>
<script type="text/javascript" src="schandlr.js"></script>

<!-- edit the properties as you see fit -->
<script type="text/javascript">
	var objCal = new scriptcalendar();
	objCal.deadCellBehavior 	= 0;		// dead date cell
	objCal.dateSelector 		= 1+2+4+8;	// date selectors
	objCal.prevHtml 		= "«";	// PREV month link text
	objCal.nextHtml 		= "»";	// NEXT month link text
	objCal.dateRangeStart 		= 2004;		// start year range
	objCal.dateRangeEnd 		= 2010;		// end year range
	objCal.cellWidth  		= 100;		// width of date cell
	objCal.cellHeight 		= 100;		// height of date cells 
	objCal.padding 			= "0";		// table cellpadding
	objCal.spacing 			= "2";		// table cellspacing

	objCal.beginMonday 		= false;	// begin week on Monday
	objCal.displayWeekNumber	= false;	// display Week Number
	objCal.showFutureEvents		= true;		// show future events
	objCal.showPastEvents		= true;		// show future events
	objCal.expandEventStyle		= true;		// allow event style to grow
	objCal.enableHandlers		= true;		// add event handlers



»  Table Of Contents