An Incredible Javascript Event Calendar

XML Calendar

An xml calendar is software that can load xml data and display a calendar based on that data. The Scriptcalendar software supports xml data events.

Version 7.14 of the software released in March 2010 has improved XML support. Prior versions of the calendar relied on custom javascript code to asynchronously load the xml. New versions use JQuery to provided AJAX functions, specifically the .ajax method. The calendar includes jquery-1.4.2.min.js which the JQuery code. This file may be found in the sccomponents folder. You can find more information about the JQUery framework on the JQuery website.

The primary benefit of using JQuery to provide AJAX functions is improved cross browser support. The AJAX functions of JQuery are supported in the following browsers.

XML Configuration

You must configure the Scriptcalendar to use xml data. The zip file contains an xml theme as an example of how to use xml data for events. However any theme can use xml events. To use xml events, you must configure your calendar/ theme by following these simple steps.

  1. Create you XML data file. There is more information on the xml structure below. For now, you just need to an xml file or a page rendering xml from your database. You'll need to know the relative path to this file or page. It is recommended that you put this file or page in your theme folder, just so there is not a complex relatively path. The xml theme in the zip has a file called scevent.xml within it, and it is the xml data.
  2. Set the xmlFile property. Your selected theme contains a scrptcal.htm file. This is the file that is loaded in the iframe and is the html page that renders the calendar. This page creates the scriptcalendar javascript object and allows you to set the various properties. The xmlFile property accepts a string value, a it is a relative path to your xml file or page. Here is an example of how to set the property.
    objCal.xmlFile = "scevent.xml";
  3. Remove the include for the scevent.js javascript file. The scrptcal.htm file of your selected theme also has all the javascript includes. Normally, the "../../sccomponents/scevent.js" file is one of these includes, and it contains javascript fscEvent calls used to create events. However you will be using xml data events, so you don't need the scevent.js file any longer. You can keep the scevent.js include and use xml data at the same time, but it may be confusing as you won't know which events are coming from which source. It is recommended you remove the include and only use xml data events. You may also want to remove the scspcevt.js include. If you are using xml generated from a database, you will probably generate all the holiday, recurring or special events, and no longer need the scspcevt.js.

That is all there is to it. The scriptcalendar will recognize the relative path in the xmlFile property and asynchronously load the file and display the events.

XML Schema

The schema for the xml file is the scevent.xsd. This file can be found in the sccomponents of the zip file. Or if you prefer, you may download the scevent.xsd by itself.

The schema allows a root node named "events" with multiple child node named "event". Each event element can have the following child nodes. These nodes correspond to the arguments of the fscEvent function call in the scevent.js.

node data type required description
month number no The numeric month (1-12) of the date of the event.
day number yes The numeric day (1-31) of the date of the event.
year number no The 4 digit numeric year of the date of the event.
text string no The text you want to appear in a date cell. It may include HTML.
popuplink string no An url you want to popup in a new window when the event text is clicked.
style string no A class name of a CSS class that you want applied to the event.
tooltip string no A message that appears when the mouse hovers over an event.
script string no Javascript to be executed during "onMouseDown" in the date cell.
filter string no Keyword to allow users to filter events.

XML Structure

This is a small sample of the xml structure the scriptcalendar expects. The child nodes of the event node correspond to the arguments of the fscEvent calls in the scevent.js. For more information on what type of data belongs in each node, please visit the User Guide.

		<text>event on 12-1-2006</text>
		<text>event on 12-2-2006</text>


One goal of the scriptcalendar is to be able to transform xml event data combined with xml calendar data and display it as html. Unforunately, many browsers don't support XLST transforms in javascript. Conventional wisdom holds that XSLT transformations should be done server side and not client side. Therefore, the scriptcalendar doesn't support any XSLT transformations at this time.