Waiting for google calendar...
When displaying more than one evemnt from a calendar a tabular format is usually used. In this example we'll start building the example from the introduction to gCalMarkup page that displays all Friday the 13ths in the next 1000 days from this Friday the 13th calendar. We'll start with the simplified version shown to the right which is generated with the following HTML:

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

    This is a basic HTML table structure. The only thing special about it is the id="{gCalMarkup _id/}.main" in the HTML tag in line 2. This id tells gCalMarkup where calendar events should be inserted in the table. Note that while the <tbody> tag could be left out and the id added to the <table> tag instead, since some of the Joomla! editors add <tbody> tags back in it's best to use it.

    Now for the template itself. Here is the template used for this table:

      <div id="{gCalMarkup _id/}.mainTemplate.container" style="display:none;">
        <table>
          <tbody id="{gCalMarkup _id/}.mainTemplate">
            <tr style="background-color: #feeab5">
              <td>{gCalMarkup _eventMonth/}/{gCalMarkup _eventDay/}</td>
              <td>{gCalMarkup _eventTitle/}</td>
            </tr>
          </tbody>
        </table>
      </div>
    

      Again this is a basic HTML table structure, but there are a couple of special things. The id="{gCalMarkup _id/}.mainTemplate" in the HTML <tbody> tag on line 3 tells gCalMarkup where to find the template. The contents of this HTML tag will be reproduced for each calendar event and insert into the displayed table (the HTML element with the id="{gCalMarkup _id/}.main" tag).

      Notice that the template contains a complete table structure inside of a <div> tag with id="{gCalMarkup _id/}.mainTemplate.container" on lines 1 and 10. This is because the javascript process that creates copies of the template requires the copy to be a valid HTML hierarchy. The copying process copies the contents of the container, which must be valid HTML, and updates the copy with information from a calendar event. The contents of the template (the HTML element with the id="{gCalMarkup _id/}.template" tag) are then transferred into the displayed table.

      Finally, we still need to define the calendar itself as we did in the previous examples. In addition to changing the id and key to represent the new calendar, we also introduce a new parameter, maxDays. In the previous example we used maxResults to return only the first event. This time we're using maxDays=1000 to return all of the events in the next 1000 days:

        {gCalDefine calendar maxDays="1000"
          key="n3kquhu5eqnd9u629gf7uphds7g9i2qe%40import.calendar.google.com" /}