Hello World - The beginner's guide

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");

You may use numbered values like "#87ceeb" instead of literal names to specify the colors.

Calendar Tag - IFrame

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]]]".
  • default-month should be set in an array like [year, month]; or you may use the predefined gToday variable to bring up the current month.
  • theme-name denotes the name of the theme used to render the calendar; It should be prepended with absolute path if the theme files are not placed together with the engine file.
  • agendar-file is the js file that defines all your agenda events and holidays. It should be prepended with absolute path if the agenda file is not placed together with the engine file. It can also be set to share another calendar's agenda store, detailed in setup agenda & holidays tutorial. It's optional.
  • context-name declares the naming space of the calendar engine so that you can access the build-in calendar functions & variables using context-name.function-or-variable from your page. It'll be available for reference after the engine is fully loaded.
  • plugin-file is the js file that contains all plugin functions. We'll talk about it in details later. If not specified, the engine will try to use the plugins.js file located in the same directory with the engine file.
Note: The name and id of <iframe> must be exactly the same.
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".

Calendar Tag - ILayer and Layer

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.

 

Summary

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.

 


Copyright © 2001-2003 CalendarXP.net, Liming Weng