Grid View Code Sample

Here is some example code to build a grid view for the calendar. This is just an example and you have the flexibility to lay out the page to suit your own design.

Below is a screenshot of the layout that this code will build. 

HTML:

Below is the HTML / Branch code that would go in the Template field for the Grid View content template.

<div id="view">View as: <a href="{#viewAsAgendaUrl}">Agenda</a> | Grid
  <br />
  <br />
  View By Category:<br />
  <form method="{#categoryNavigation.form.method}" action="{#categoryNavigation.form.action}">
    {#categoryNavigation.form.fields.category.selectMenu}
    <input type="submit" name="submit" value="" class="go" />
  </form>
</div>

<table id="grid" cellpadding="0" cellspacing="0" width="100%">
  <thead>
    <tr>
      <td colspan="2"><a href="{#grid.previousDateUrl}">&lt;-</a></td>
      <td colspan="3">{#grid.month} {#grid.year}</td>
      <td colspan="2"><a href="{#grid.nextDateUrl}">-&gt;</a></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
    {loop items="#grid.rows" value="row"}
      <tr>
        {loop items="#row.boxes" value="box"}
          <td class="{#box.weekdayAbbr}{if #box.isToday} today{/if}{if #box.isWeekend} weekend{/if}{if isNot #box.isThisMonth} prevMonth{/if}">
            <div class="min-height"></div>
            {#box.dayShort}
              {if #box.eventCount > 0}
                <div class="events">
                  {loop items="#box.events" value="event"}
                    <a href="{#event.url}" class="iframe">{#event.title}</a>
                  {/loop}
                </div>
              {/if}
          </td>
        {/loop}
      </tr>
    {/loop}
  </tbody>
</table>