|
[ How the Calendar Works ] [ Calendar Examples ] [ Calendar Files ]
This page illustrates how to define events for JavaScript Event Calendar, with images
and hyperlinks. It also illustrates how to override the default configuration
settings.
Hint: Before reading the comments below, go to July 2003 to see what an
"event" looks like on the calendar!
The first required JavaScript statement can go anywhere in the HTML page, as long as
it is before the place where you want the calendar to appear.
| <script src="calendar.js"></script> |
This statement instructs the client browser to download the CALENDAR.JS file.
That file contains all of the "code" for the JavaScript Event Calendar.
Then place the second piece of JavaScript at the exact spot
in the page where you want the calendar to show.
(Because there are more statements here than in Example 1,
I have broken them apart for annotation.)
<script language="JavaScript">
<!-- |
The first line indicates the beginning of an in-line JavaScript program. The second
line is a tricky way to make sure that older versions of browsers (that don't understand
JavaScript) don't "blow up"; they'll simply ignore the rest of the script
DefineEvent(20030705, "Kevin's <big><font
color=red>44th</font></big> birthday",
"http://www.ilsen.net", "images/birthday.gif", 62, 50);
DefineEvent(20031130, "Kevin and Barbara's Anniversary", "",
"", 0, 0); |
These lines define two events: my 44th birthday (July 5,
2003) and the
date of my anniversary. Notice
that each event is defined by calling the DefineEvent( ) function and passing it the
following parameters:
- the date of the event in YYYYMMDD format;
- a description for the event (which can include embedded HTML tags);
- an optional URL if you want visitors to be able to click on the description and jump to
another page;
- an optional image to be displayed with the event description;
- the width and height of the image.
Notice also that the events can be defined in ANY ORDER.
| SpecialDay=0; |
By default, Sundays are highlighted in a special color. If you
prefer to highlight a different day, set this variable to the proper day number.
Sunday=1, Monday=2, . . . Saturday=7. If you do NOT want a particular day of the
week to be highlighted, set SpecialDay to any other value, such as 0 or -1. |
ColorBackground="ccffff";
ColorToday = "gray";
ColorEvent = "red"; |
In this example, the background color will be cyan (mostly green and blue,
with somewhat less red); the highlighted color for today will be gray, and the highlighted
color for events will be red. Notice the use of double quotes surrounding the
values. |
FirstMonth=200208;
LastMonth=200311; |
With no events defined, the calendar would range from January to December
of the current year. Each time you call DefineEvent( ), the range is automatically
expanded to include the months containing the events. But if you would prefer that
the range include more (or fewer) months, you can explicitly set the first month and/or
the last month, using the format YYYYMM. In this case, the range will be from
August 2002 through November 2003. |
The lines above set certain configuration options (overriding the defaults), see the
explanations above.
Calendar( );
// -->
</script> |
Having defined the events and adjusted the configuration settings, we now display the
calendar and end the script program.
Before attempting to implement the JavaScript Event Calendar on your own
web page, it would be a good idea to study ALL of the examples.
[ Back ] [ Next ] |