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}"><-</a></td>
<td colspan="3">{#grid.month} {#grid.year}</td>
<td colspan="2"><a href="{#grid.nextDateUrl}">-></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>