An Incredible Javascript Event Calendar

User Guide

»  Table Of Contents

Using Event Filters

Section 2.4.8

The concept of the filter is to allow you or your users to display subsets of the events on the calendar. First you define a set of keywords, and these keywords appear as checkboxes along the top of the calendar. When you or a user checks a keyword, the calendar is refreshed and the events corresponding to that keyword are displayed. Conversely, when a keyword is unchecked the events are removed. This is accomplished by using a QueryString parameter "scFilter".

To use the filter on your calendar, you must follow a few steps. One, use the filterNames properties to define keywords as a comma delimited string. For example, the line below creates three keywords.

objCal.filterNames = "weekends,holidays,special";

Two, you must add the keywords to individual events. Each event may only have one keyword. You add a keyword by using the 9th parameter of the fscEvent function. If you do not add a filter keyword to an event, that event will always appear regardless of the filters selected.

Three, you will probably want to have some filtered events showing when the page first displays. Since the filter is accomplished through the QueryString parameter "scFilter", you must edit the iframe url to accomplish the default. Now, the "scFilter" parameter is comma delimited string. Keywords contained with string will display events, those omitted will hide events. Let's look at an example url for the iframe tag (using the keywords above).


This url will have the "weekends" and "holidays" filter events appearing, and the "special" filter events will not appear. You'll note that url must be encoded. When a url is encoded, a comma character is translated into "%2C". Therefore, you when you create the default url, you want to use "%2C" to delimit keywords.

Bear in mind that a space also gets encoded. It is recommended that you choose keywords without spaces or simply remove the spaces from your keywords. This will make it easier to create the url to default the filters.

You can control the style of the filter checkboxes in the CSS. The CSS Section covers the classnames in the CSS and describes what classes control the filter display.

»  Table Of Contents