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.
<!--
SCRIPTCALENDAR
An incredible javascript calendar
copyright 2005
http://www.scriptcalendar.com
-->
<html>
<head>
<title>http://www.scriptcalendar.com</title>
</head>
<body>
<!-- JAVASCRIPT COMPONENTS -->
<!-- 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>
<!-- SCRIPTCALENDAR OBJECT -->
<!-- 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
objCal.initialize();
</script>
</body>
</html>