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 on 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, as you can tell 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");

Most probably you are looking forward to redirecting the current page to another URL upon any click on the specific date - the solution is actually closer than it appears. We have pre-defined a popup() call in plugins.js that can help you right away:

fAddEvent(2002,9,23, "Hello World!", "popup('http://www.calendarxp.net','_top')", "#87ceeb", "dodgerblue");

Of course, you may use '_blank' as the 2nd parameter for the popup() call so as to pop up a new window instead of redirecting. Also, numbered values like "#87ceeb" can be used anywhere that accepts literal color names.

 

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. However, the built-in auto-resize function might not work on some certain browser, in which case you may set the width and height manually to be exact the size you need.
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 first-day-of-week, 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 of next month using the supermini theme?

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

 


Copyright© 2003-2004 Idemfactor Solutions, Inc. All rights reserved.