Using Enhancements

Free JavaScript Event Calendar

Using Enhancements

This page is still a work in progress; I will be adding to these explanations here over time. Some of the features may actually be easier to figure out how to use by looking at the sample calendars and the accompanying annotations in the Demos, than by reading the explanations here.

Many of the formatting enhancements I made are enabled by default, but I added new configuration variables to allow you to enable or disable them and to control various display attributes such as colors. This allows you to Customize the Look & Feel of your calendar without having to modify the calendar JavaScript. Anyone who has been using Kevin Ilsen's calendar script should be able to replace it with my version without requiring any other changes. These new variables are discussed on the How It Works page.

Techniques for including holidays and/or the corresponding dates in another calendar system are discussed on the Holidays & Alternate Dates page.

Message Boxes

I noticed that many print calendars add message boxes in the unused date cells that usually occurs at the beginning and/or end of most months, so I added this capability to this web calendar. These messages can be either month-specific or generic ones that apply to any month. Since the sizes of these message areas will vary depending on which day of the week a given month begins and end on, I add the capability to specify different messages to display based on the length of the space available.

To enable this feature, I added "showMsgBox" and "defaultMsgBox" configuration settings and an "AddMsgBox" command. This feature is enabled by default, but you can disable it by setting "showMsgBox = false". To define your own generic message to display in message boxes, set "defaultMsgBox" to a string containing your message.

To define a month-specific message, use the "AddMsgBox" command. The first argument, "yearmonth", specifies the month and year in the form "yyyymm" and the second argument is a text string containing the message including any HTML formatting. An optional 3rd argument, "minspan", specifies the minimum number of adjacent cells required to display that particular message. [Note: "DefaultMsgBox" is simply a more convenient way of using the "AddMsgBox" command with a yearmonth of 0 which means every month.]

If there is unused space at the beginning of the month, it will display the first month-specific message defined for that yearmonth that satisfies "minspan" and mark it as shown. If there is no month-specific message, it will show a default message. If there is unused space at the end of the month, it will repeat this process beginning with the first un-shown month-specific message defined for that yearmonth. Depending on the arguments you supply, what gets displayed will vary based on what day of the week the month begins or ends on. For example:

AddMsgBox(200310,"Long message",3);
AddMsgBox(200310,"Short message");

would result in "Short message" at the top because October 2003 began on a Wednesday and ended on a Friday. In a different month both, either, or neither of these messages might be displayed on the calendar.

By having different "AddMsgBox" commands for the regular and printer-friendly html pages, you could specify one set of messages for the web calendar, while turning off display of the navigation features and specifying another set of messages for the printer-friendly version.

If your message box messages are a mixture of repeated messages and month specific ones, to make it easier to enter your messages you could do something like this in your message file.

repeatmsg = "<font color=blue>Include this message every month.</font>";
AddMsgBox(200405, repeatmsg + "<br>Something specific for May 2004");
AddMsgBox(200406, repeatmsg + "<br>Something specific for June 2004");

While it was not designed for this purpose, it is possible to access undisplayed message box messages outside your calendar using the "DoMsgBox" command. For example, if you call:

DoMsgBox(gloYearmonth,7);

after you call "Calendar()", it will display a message box under your calendar with the next undisplayed message for the month shown. You can do this even if "showMsgBox" is set to false which disables the message boxes on the calendar itself.

Category Layers

My category layers features lets you consistently apply different formats, typically colors, to entire categories of events. The same format is also applied to the category names at the bottom of the calendar to help visitors understand what the colors mean. The checkboxes associated with the category labels also let your visitors selectively hide or display entire categories of events so they can focus on the categories of events which interest them. This is discussed in more detail on the How It Works page. You could also use layers to include subsets of your events in multiple calendars.

Enabling Event Download for Outlook & PDA's

Outlook can import from, among other things, a comma delimited text file and most PDA's can synch up with Outlook. I have found a way to generate the corresponding event data for the displayed month in Outlook-compatible, comma separated format and display it in a text area on a web page. You can then cut and paste that into a file and import it into Outlook. The event data in the web calendar script does not have start and end times except as embedded in the event description, so I just map them in as all day events. I also set the location field as "CalendarScript" in case you wanted to use the Outlook event filter.

Enabling the Export function is quite easy. Just copy the "sample_export.html" file to some appropriate name and edit it to source all the event scripts you want to be exportable. Then set "ExportPage" to this filename. If you want, you can customize it to match your site better by changing things like fonts and backgrounds. One problem I keep running into is changing things in my main calendar html page without making the corresponding changes in the Export and Print pages. I have changed the sample files to move the shared settings into a common script which the 3 html pages all source. You still have to source the right event scripts in EACH html page!

Enabling an Alternate Print-friendly Display

Enabling the alternate print-friendly display is also quite easy. Just copy the "sample_print.html" file to some appropriate name and edit it to source all the event scripts you want to appear on the print view. Then set "PrintPage" to this filename. If you want, you can customize it to match your site better by changing things like fonts and backgrounds. You will probably want to scale down or disable event images to reduce the size of the calendar and make it fit better on paper. You can also try changing font faces and sizes. How it comes out on any given printer will still depend heavily on the printer driver and settings used such as margins.

If it is important to have a downloadable, one page print calendar, you will probably need to generate that yourself as a PDF and upload it. Unfortunately, since "PrintPage" points to a specific filename, the hyperlinks for every month will point to the same file. An upcoming release will include a "PrintPageRule" to let you specify a varying filename based on the "yyyymm" date.