Show:
Races Club Events

Waiting for google calendar...
...
When multiple calendars are displayed at the same time they can be individually shown and hidden. This is typically done with HTML checkboxes and links. For example the following line displays the checkbox that shows or hides the Races calendar when it is clicked:

  • <input type="checkbox" name="calendarSelect {gCalMarkup _articleCount/}[]" checked="checked" id="{gCalMarkup _id/}.calendarSelect.races" onclick="{gCalMarkup _selectionChanged false races /}" />

    The most important part of this line is the "onclick" attribute. When this checkbox is clicked the 'races' argument tells gCalMarkup to change whether the Races calendar is shown or hidden. The "false" argument tells gCalMarkup not to change any other calendars. The calendarSelect "id" attribute must end with the name of the calendar and allows gCalMarkup to find the checkbox so it can be set or cleared. The calendarSelect "name" attribute must be as shown and is used to group all the checkboxes together as a group (used below to hide the other calendars). Lastly, the checked="checked" attribute indicates that this calendar should be shown when the page first loads.

    The next line displays the "Races" link next to the checkbox. When this link is clicked, the Races calendar is shown and any other calendars are hidden:

      • <a style="color:#0080D0;" onclick="{gCalMarkup _selectionChanged true races/}">Races</a>

      The same "onclick" attribute is used in this link that was used in the checkbox above. The difference is the "true" argument which tells gCalMarkup to show the "Races" calendar and to hide all of the others (see the "name" attribute above).

      The next two lines are the same as the first two, except they are for the "Club Events" calendar instead of for the "Races" calendar. Notice that the "name" parameter contains the same "calendarSelect[]" name:

        • <input type="checkbox" name="calendarSelect{gCalMarkup _articleCount/}[]" checked="checked" id="gCalMarkup.calendarSelect.clubEvents" onclick="{gCalMarkup _selectionChanged false clubEvents/}" />
        • <a style="color:#FF00FF;" onclick="{gCalMarkup _selectionChanged true clubEvents/}">Club Events</a>

        Lastly, we add a calendar status line:

        • <span style="background-color:#eeeeee;" id="{gCalMarkup _id/}.status">...</span>

        This line displays the "2 of 2 calendars loaded" line that indicates how many calendars there are and how many are currently displayed.