Hello World - The beginner's guide

The vision of CalendarXP is to keep it simple outside while powerful inside. Most of the time, to get a calendar shown in your page is as simple as inserting the following tag to wherever you want, just like other HTML tags.

<iframe name="gToday:normal:agenda.js" id="gToday:normal:agenda.js"
src="iflateng.htm" scrolling="no" frameborder="0"></iframe>

Yes, so simple and nothing more needed! As you can see from the HelloWorld demo, it's very simple and straightforward. We'll reference the above <iframe> tag as the calendar tag from now on.

If you want to support the outdated Netscape 4.x browser, you'll have to add 3 more tags - a <a> and a <img> tag in <iframe> and another <layer> tag at page bottom, as following.

...
<iframe name="gToday:normal:agenda.js" id="gToday:normal:agenda.js"
src="iflateng.htm" scrolling="no" frameborder="0">
<a name="_spacer"><img width=172 height=180></a></iframe>
...
<layer name="gToday:normal:agenda.js" src="nflateng.htm">     </layer>
</body>
</html>

NOTE: the <layer> tag has to sit at the very bottom of your page, it must be the last tag above your </body> tag.

So where is the "Hello World" then? - Simply append the following line to the agenda.js and click the date of Sep 23, 2002 in the calendar... Now you get it!

fAddEvent(2002,9,23, "Hello World!", "alert('Hello World!')", "#87ceeb", "dodgerblue");

Of course, you may use numbered values like "#87ceeb" instead of literal names to specify the colors.

 

Now let's take a look at the syntax of the calendar tag.

Calendar Tag - iFrame

The <iframe> of the calendar tag is the main calendar engine for all supported browsers except NN4. It has the following important properties:

Property Name	Description
src	Loading the script engine "iflateng.htm". You may specify either an absolute path or a relative one here, e.g. src="/calendar/ipopeng.htm" or src="../../calendar/ipopeng.htm", any will do.
name & id	"default-month:theme-name[:agenda-file[:context-name[:plugin-file]]]" -- [] indicates optional default-month should be set in an array whose first element indicates the year and second one indicates the month, e.g. "[2003,9]:normal"; you may also 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 the absolute web path if the theme files were not located together with the engine files, e.g. "gToday:/caltheme/normal". Note that you should not set any domain or protocol prefix before the path. agendar-file is the js file that defines all your agenda events and holidays. It should be prepended with the absolute path if the agenda file were not located together with the engine files, e.g. "gToday:normal:/events/agenda.js". It can also be set to share another calendar's agenda store, detailed in setup agenda & holidays tutorial. context-name declares the naming space of the calendar engine so that you can access the build-in calendar functions and variables via context-name.function-or-variable from your web page. It's only available for reference after the page is fully loaded. plugin-file is a javascript file that contains all plugin functions. We'll talk about it in details later. If omitted, the engine will try to use the plugins.js file in the directory where the engine files are located. Note: The name and id of the <iframe> must be set to exactly the same.
width & height	They are the default initial width and height of the calendar panel.   You don't have to specify them most of time.
scrolling & frameborder	They should always be set to "no" and "0".

Calendar Tag - Layer

The <layer> tag is dedicated to support the Netscape 4.x browser. Only the "src" and "name" properties are required in the <layer> tag, and they have the same meaning as the ones in <iframe>. The enclosed <a><img></a> works as a placeholder for the calendar. Please check the Rule#6 of Netscape 4 tutorial for details.

 

Summary

We now know that the calendar tag mentioned before actually says - show a calendar in the "normal" theme, initialize it with the current month and load with all agendas and holidays from agenda.js.

Please see Hello World Demo for a live sample.

 

For options like Monday-first(gbEuroCal), colors and fonts please take a look at the "Working with themes" tutorial. There are more than 60 options that can be used to control the look and feel of the calendar, all self-documented in the theme files.

Exercise. What to do if I want to show a calendar for October 2000 using the supermini theme?

Solution. Simply change the name & id from "gToday:normal:agenda.js" to "[2000,10]:supermini:agenda.js".

 

---