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.
<html>
<head>
<title>my page</title>
</head>
<body>
<p>
This is text or HTML elements that preceed the calendar
</p>
<div id="scParent">
<!-- ********* ********* ********* ********* ********* -->
<!-- BEGIN SCRIPTCALENDAR CODE -->
<!-- ********* ********* ********* ********* ********* -->
<!-- JAVASCRIPT COMPONENTS -->
<!-- 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>
<!-- SCRIPTCALENDAR OBJECT -->
<!-- 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
objCal.initialize();
</script>
<!-- ********* ********* ********* ********* ********* -->
<!-- END SCRIPTCALENDAR CODE -->
<!-- ********* ********* ********* ********* ********* -->
</div>
<p>
This is text or HTML elements that follow the calendar
</p>
</body>
</html>
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.