The vision of CalendarXP is to keep it simple outside while powerful inside. Most of the time, all you need to get a beautiful calendar on your page is to append the following tags to the bottom of your page.
<iframe width=174 height=189
name="gToday:normal:agenda.js" id="gToday:normal:agenda.js"
src="ipopeng.htm"
scrolling="no" frameborder="0"
style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
<LAYER name="gToday:normal:agenda.js" src="npopeng.htm"> </LAYER>
</iframe>
It consists of 3 HTML tags: <iframe>, <ilayer> and <layer>, but we take them together as a whole unit - the calendar tag.
How to summon it then? Well, just call the gfPop.fPopCalendar()
from anywhere of your page. For example,
<a href="javascript:void(0)" onclick="gfPop.fPopCalendar(document.demoform.dc);return false;">pop me</a>
The document.demoform.dc
is the form field in which you want
to put the selected date. It can be a text field, a hidden field, a textarea
or even a button, as long as it has a "value" property.
Where is the Hello World then? Yeah, please append the following line to
the agenda.js
and select the date of Sep 23, 2002 from 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.
The <iframe> of the calendar tag is the main calendar engine with support for all supported browsers except NN4.(NN4 will simply skip this tag and go for the <layer> tag directly.) It has the following important properties:
Property Name | Description |
---|---|
src | Loading the script engine "ipopeng.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. |
style | It must have at least the following properties "visibility:visible;
z-index:999; position:absolute; left:-500px; top:0px; "These properties are mandatorily set and you shouldn't change unless you know what you are doing. |
scrolling & frameborder | They should always be set to "no" and "0". |
The <layer> of the calendar tag is the Netscape 4 engine. You may leave it 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 by other browsers.
To show up the calendar, you need to call the fPopCalendar()
with proper context-name, usually "gfPop". This function has 4 important
parameters that will help you to manipulate the date:
gfPop.fPopCalendar(dateCtrl [,dateRange [,posLayerId [,posCtrl]]]);
Parameter | Description |
---|---|
dateCtrl | The reference of the form field that stores the selected date. It doesn't have to be a form element. Any object with a "name" and "value" property can be passed in. The name of this object is requried because the engine needs it to identify the corresponding NN4 localizer. |
dateRange | dateRange is an array in the following format:
This is a very useful and powerful feature to constrain the valid date range on-the-fly. |
posLayerId | The name of the layer tag that contains the localizer tag. It's optional. You'll need to specify it when the localizer of your date field is located within a <layer> or <ilayer> tags. You'll also need it if your date field is within an <iframe> and you want to pop the calendar across the frame border(above the iframe). Please check out the CrossFrame demo for details. And remember whenever you deal with an <iframe> tag, you must set the name and id of it to be exactly the same. |
posCtrl | The reference of the localizer tag. The engine will position the calendar right below it. If you don't specify one, the engine will take the dateCtrl as the localizer. Note this parameter is designed for browsers other than NN4. The localizer for NN4 will be detailed in the Working with Netscape 4 tutorial. |
We now know that the preceding sample actually says - pop a calendar under
the document.demoform.dc
form field using the "normal"
theme, initialized by the current month and loaded with all agendas and holidays
from agenda.js
. After picking a date, the selected date will
be set to the value property of document.demoform.dc.
Please see Hello World Demo
for a live demo.