The vision of CalendarXP is to keep it simple outside while powerful inside. Most of the time, all you need is to simply insert the following tags to wherever you want, just like any other HTML tags, in your page.
<iframe width=174 height=189
name="gToday:normal:agenda.js" id="gToday:normal:agenda.js"
src="iflateng.htm"
scrolling="no" frameborder="0">
<ilayer><layer name="gToday:normal:agenda.js" src="nflateng.htm"> </layer></ilayer>
</iframe>
It consists of 3 HTML tags: <iframe>, <ilayer> and <layer>, but we take them together as a whole unit - the calendar tag.
Where is the Hello World then? Yeah, please append the following line to
the agenda.js
and click the date of Sep 23, 2002 in the calendar.
fAddEvent(2002,9,23, "Hello World!", "alert('Hello World!')", "#87ceeb", "dodgerblue");
#87ceeb
"
instead of literal names to specify the colors.
The <iframe> of the calendar tag is the main calendar engine with support for all supported browsers except NN4.(NN4 will ignore this tag and go for the <layer> tags.) It has the following important properties:
Property Name | Description |
---|---|
src | Loading the script engine "iflateng.htm". You may also specify absolute path here. |
name & id | "default-month:theme-name[:agenda-file[:context-name[:plugin-file]]]" .
|
width & height | The default width and height of calendar panel in pixels. They are set for browsers that don't support iframe resizing, like IE4 and Opera. They are deprecated! You don't need them any more. |
scrolling & frameborder | They should always be set to "no" and "0". |
The <ilayer> and <layer> of the calendar tag is the Netscape 4 engine. You may leave them out if your website doesn't need to support NN4. Only "src" and "name" properties are required in the <layer> tag, and they have the same meaning as the ones in <iframe>. It is embraced by the <iframe> tag so that it won't be parsed in other browsers.
We now know that the above calendar tag actually says - show a calendar in
the "normal" theme, initialized by the current month and loaded
with all agendas and holidays from agenda.js
.
Please see Hello World Demo
for a live demo.
Exercise. What to do if I want to show a calendar of October 2000 using the supermini theme?
Solution. Simply changing the name & id from "gToday:normal:agenda.js"
to "[2000,10]:supermini:agenda.js"
.
Note. The gdSelect
option in theme-name.js
file is used to set the selected date.