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.
- Microsoft Internet Explorer 6.0+
- Firefox 2+
- Safari 3.0+
- Opera 9.0+
- Chrome
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.
-
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.
-
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";
-
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.
<events>
<event>
<month>12</month>
<day>1</day>
<year>2006<year/>
<text>event on 12-1-2006</text>
<popuplink/>
<style/>
<tooltip/>
<script/>
</event>
<event>
<month>12</month>
<day>2</day>
<year>2006<year/>
<text>event on 12-2-2006</text>
<popuplink/>
<style>scEventRed</style>
<tooltip/>
<script/>
</event>
</events>
XSLT
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.