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.
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
|
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". |
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.
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"
.