Waiting for google calendar...

To complete this example we need to add one additional template to generate the month headers. It is very similar to the main template in the first part of this example:

  <div id="{gCalMarkup _id/}.monthTemplate.container" style="display:none;">
    <table>
      <tbody id="{gCalMarkup _id/}.monthTemplate">
        <tr>
          <td style="border-bottom: 1px solid black;
                     text-align: center; font-size: larger;
                     color: white; background-color: #135cae"
              colspan="4">
            {gCalMarkup _eventMonthText/} {gCalMarkup _eventYear/}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

The most important differences between this template and the main template in the previous example are the ids on the <div> and <tbody> tags where "mainTemplate" is replaced with "monthTemplate". The required ids are {gCalMarkup _id/}.monthTemplate and {gCalMarkup _id/}.monthTemplate.container.

gCalMarkup will add a copy of this template, with the markup selectors replaced with information from the event, before the first event and before any event where the month changes.