Month View
Month View
The month view template represents a calendar month's worth of events. The month view is prefaced by a contextual header.
The bulk of month view is a table (sun-month) where each table row (sun-week) represents a week, where each table data cell (sun-day) represents a day. The main table has a header row, where each table header cell (sun-dayOfWeek) contains the day of week that column represents.
Each table data cell contains a header (sun-dayHeader) that contains that day's date numeral (sun-dayDate) and a link that leads to a day view template for that date (sun-dayZoomIn).
Each table data cell then contains a div contains for each category of events: All Day, Ending, or Today's events, represented by classes sun-allDay, sun-ending, sun-todays, respectively. Each container will contain all events and other data for that category.
For All Day and Ending events, each container has a header element sun-eventTime with the label "All Day Events" or "Ending Events" followed by an unordered list (sun-events) whose each list item (sun-eventInfo) contains all the information for that event, as specified in the Brand-specified template.
For Today's events, the container has pairs of header elements (sun-eventTime) and unordered lists (sun-events), grouped by starting time of the events.
The days have a limit to how many events it may display. Once this limit is passed, a message (sun-more) is displayed at the bottom of the day. If the criteria variable navDay is set to true, this message will also be a link to the day view for this day.
At the beginning of each week, there may also be an extra data cell and link to a week view for that week, if the criteria variable navWeek is set to true. If it is not, neither the data nor the link are displayed.
Sample
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | |
|---|---|---|---|---|---|---|---|
1All Day Events |
24:00 PMAll Day Events |
3All Day Events |
41:00 PM5:00 PM7:00 PMAll Day Events |
510:00 AMEnd Day Events |
69:00 AM |
||
712:00 PMAll Day Events |
8 |
9All Day Events |
10 |
11 |
12All Day EventsEnd Day Events |
13 |
|
| [...] | [...] | [...] | [...] | [...] | [...] | [...] |
List of All Available Elements
div id="sun-monthView"
The parent container around entire view template
table class="sun-month"
The table containing the entire calendar month
th class="sun-dayOfWeek"
The header table cell containing name of the day of the week (e.g. Sunday, Friday)
tr class="sun-week"
The table row containing one calendar week
td class="sun-day [sun-current] [sun-selected] | [sun-filler]"
The table cell <td> that contains each calendar day.
In the month view, elements given the sun-day class can also have the sun-filler class, which signifies those extra days on a calendar month before the month's days starts and after the month's days ends.
The sun-selected class is given to elements often currently active by user attention. For example, clicking on a day to highlight a day.
The sun-current class is given to the day whose day it is today. In general, this class is given to elements whose time corresponds to today's time
Also, each sun-day is given an html identifier of the format "[month][date]", such as "feb01"
span class="sun-button sun-weekZoomIn"
This element is displayed only if the criteria variable navWeek is set to true. This element contains a link to view all events for this week in a week view.
h2 class="sun-dayHeader"
The element that contains each day's banner. This banner includes the day's date, as well as a link to view that day.
span class="sun-dayDate"
The numeral of a day's date. For October 1, 2001, the day date would be 1.
span class="sun-button sun-dayZoomIn"
This element is displayed only if the criteria variable navDay is set to true. This element contains a link to view all events for this day in a day view.
span class="sun-more"
If the criteria variable navDay is set to true, the element contains a link to additional events for this day. If the criteria variable is not set to true, then this element contains just text.
div class="[sun-allDay | sun-ending | sun-todays]"
The container element containing all data associated with a certain category of events, such as all day, ending, today events. This element contains the eventTime and sun-events elements below.
h3 class="sun-eventTime"
The element containing the starting time each group of events (e.g 12:00pm). This element may also contain the heading text for "All Day Events" and "Ending Events" groups of events.
ul class="sun-events"
This element contains a list of events under a given eventTime heading. Each event is contained in a separate list item (<li>)
li class="sun-eventInfo"
The list item element containing event information. The contents of li.sun-eventInfo are templatable.
span class="sun-eventName [sun-active | sun-cancelled | sun-postponed]"
This element is placed by the default Month View Template.
This element contains the name of the event as well as a link to this specific event.
Elements may also get one of the following three additional classes: sun-active, sun-cancelled, and sun-postponed. Each indicates the status of the event. You may desire to style cancelled events with a strikethrough, postponed events with italics, etc.