An Incredible Javascript Event Calendar

User Guide

»  Table Of Contents

No Iframe Installation

Section 1.2.0

There may be a reason you do not wish to use the iframe installation. Instead, you may wish to render the calendar directly within your HTML page. This method merges the scriptcalendar code with your HTML, so you lose the separation achieved by the iframe. But, you gain the advantage of not having the iframe.

In the no iframe installation, you must merge the code typically seen in the scrptcal.htm file of your choosen theme into your HTML page. The following is an example HTML page showing that merge.

<title>my page</title>


This is text or HTML elements that preceed the calendar

<div id="scParent">

<!-- ********* ********* ********* ********* ********* -->
<!-- ********* ********* ********* ********* ********* -->

<!-- do not edit unless you have moved the component javascript files -->
<style type="text/css" media="screen"> <!-- @import "scthemes/outlook/scrptcal.css"; --></style>
<style type="text/css" media="print"> <!-- @import "scthemes/outlook/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="scthemes/outlook/schandlr.js"></script>

<!-- edit the properties as you see fit -->
<script type="text/javascript">
	var objCal = new scriptcalendar();

	objCal.license = new Array("[insert license key here]");

	objCal.deadCellBehavior 	= 0;		// dead date cell behavior
	objCal.dateSelector 		= 1+2+4+8;	// date selectors
	objCal.prevHtml 		= "«";		// PREV month link text
	objCal.nextHtml 		= "»";		// NEXT month link text
	objCal.dateRangeStart 		= 2007;		// 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 			= "2";		// table cellpadding
	objCal.spacing 			= "1";		// table cellspacing


<!-- ********* ********* ********* ********* ********* -->
<!-- ********* ********* ********* ********* ********* -->


This is text or HTML elements that follow the calendar


You must still upload the contents of the scriptcalendar zip to your web server. Again, make sure you preserve the folder structure. Also, upload the folders to the same location as the HTML page where you want the calendar to appear. This location is the root folder.

Please note the css and javascript includes. These lines of code import the scriptcalendar engine, events, special events, css and more. Assuming you preserved the correct folder structure, the relative paths of these files should not need to change.

Next, the calendar is a javascript object. You create an instance of the scriptcalendar object, set the various properties, and call the initialize method.

Finally, note that the license key is implemented using the "license" property. You must place the proper license key here or the calendar will behave in demo mode.

»  Table Of Contents