Show:

Waiting for google calendar...
Categories of events can be defined and placed in a drop-down menu as in the calendar on the right. The drop-down is used to filter events so that only those of interest are displayed. Categories can be for all events in a group (groups are discussed in a later example), for all events in a calendar, and for individual events. Categories are defined using {gCalDefine category/} commands:
  {gCalDefine category id="races.series" title="Series Races" /}
  {gCalDefine category id="races.local" title="Local Races" /}
  {gCalDefine category id="races.5K" title="5K Races"/}
  {gCalDefine category id="races.10K" title="10K Races"/}
  {gCalDefine category id="races.7M" title="7M Races"/}
  {gCalDefine category id="races.10M" title="10M Races"/}
  {gCalDefine category id="races.marathon" title="Marathons"/}
  {gCalDefine category id="races.ultra" title="Ultras" color="red"/}
  {gCalDefine category id="clubEvents." title="Club Events"/}
  {gCalDefine category id="." title="All" color="black"/}

The id parameter has three components: group id, calendar id, and event id which are separated by '.'s. The first eight commands define event categories with a blank group id, a calendar id of "races", and various event ids. A blank ("") group id indicates the default group (when groups are not used). The leading "." is required and indicates that these categories apply to the calendar with an id of "races". For example, line 3 defines a category for "5K Races". All of the events in the races calendar that contain the text [category=5K] as part of the description will be placed in this category.

The category command in line 9 defines a calendar category for the "Club Events" calendar. Notice that it does not contain an event id. All events in this calendar will be assigned to this category.

The last line defines a group category and is used to create an "All" category for the drop-down. Again, since the group id is blank (""), this category will be assigned to the default group or all of the events in both calendars.

Now we need to add the drop-down itself to the displayed HTML (note that the float and width style attributes have been moved to a containing <div>):

  <div style="float: right; width: 25%;">
    <p>Show:
      <select id="{gCalMarkup _id/}.categorySelect"
              onchange="{gCalMarkup _displayGroup/};">
      </select>
    </p>
    <table style="border: 3px double #135cae;" cellspacing="0">
      <tbody id="{gCalMarkup _id/}.main">
        <tr style="background-color: #feeab5">
          <td>Waiting for google calendar...</td>
        </tr>
      </tbody>
    </table>
  </div>

    as well as a new template that will be used to populate the drop-down with each category found:

      <div id="{gCalMarkup _id/}.categorySelectTemplate.container" style="display:none;">
        <select id="{gCalMarkup _id/}.categorySelectTemplate">
          <option value="{gCalMarkup id/}" gcalmarkup.style.x="color:{gCalMarkup color/};">
            {gCalMarkup title/}
          </option>
        </select>
      </div>
    

      We're using a new group of gCalMarkup ids, categorySelect and categorySelectTemplate, and an HTML <select> element. the <select> element contains an onchange="{gCalMarkup _displayGroup/};" attribute that handles updating the display when the selected category is changed. The {gCalMarkup _displayGroup/} command is a convenience markup tag which will be replaced with the full path to the displayGroup() function in the gCalMarkup plugin. The category select template is similar to previous templates. It is used to add an <option> element to the category select element for each category defined in the define category commands. First the markup tags are replaced with information from each category (the color, id, and title parameters), and then the contents of the template (the <option> element) are copied into the category select element.