sogo/UI/Templates/SchedulerUI/UIxCalMonthView.wox

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE container>
<container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label">

  <md-card>
    <md-card-actions layout="row" layout-align="start center">
      <md-button class="md-icon-button"
                 label:aria-label="Previous Month"
                 var:date="prevMonthQueryParameters.day"
                 ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
          <var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" />
      <md-button class="md-icon-button"
                 label:aria-label="Next Month"
                 var:date="nextMonthQueryParameters.day"
                 ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
      <div class="md-flex"><!-- spacer --></div>
      <md-button class="md-icon-button md-accent"
                 label:aria-label="Today"
                 ng-click="app.today()"><md-icon>today</md-icon></md-button>
      <a class="md-icon-button md-button"
         label:aria-label="Day"
         href="#/calendar/day"><md-icon>view_day</md-icon></a>
      <a class="md-icon-button md-button"
         label:aria-label="Week"
         href="#/calendar/week"><md-icon>view_week</md-icon></a>
      <a class="md-icon-button md-button"
         label:aria-label="Month"
         ng-disabled="true"
         href="#/calendar/month"><md-icon>view_module</md-icon></a>
      <a class="md-icon-button md-button"
         label:aria-label="Multicolumn Day View"
         href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
    </md-card-actions>

    <md-toolbar class="monthView">
      <div layout="row" layout-align="center center"
           class="md-flex md-default-theme md-fg md-hue-1">
        <var:foreach list="headerDaysToDisplay" item="currentTableDay">
          <div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
        </var:foreach>
      </div>
    </md-toolbar>

    <md-content class="md-flex" sg-calendar-scroll-view="monthly">
      <div class="calendarView monthView">
        <md-grid-list
            md-cols="7"
            md-row-height="1:1"
            md-gutter="0">
          <var:foreach list="weeksToDisplay" item="currentWeek">
            <var:foreach list="currentWeek" item="currentTableDay">
              <md-grid-tile
                  md-rowspan="1"
                  md-colspan="1"
                  var:class="dayCellClasses"
                  var:id="currentDayId"
                  >
                <sg-calendar-day layout="column" layout-fill="true"
                                 var:sg-day="currentTableDay.shortDateString"
                                 var:sg-day-number="currentDayNumber"
                                 var:sg-day-string="currentTableDay.iso8601DateString">
                  <div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
                    <var:if condition="currentTableDay.isToday">
                      <span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
                    </var:if>
                    <var:if condition="currentTableDay.isToday" const:negate="YES">
                      <span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
                    </var:if>
                  </div>
                  <md-content
                      sg-draggable-calendar-block="sg-draggable-calendar-block"
                      class="clickableDayCell">
                    <sg-calendar-month-day
                        sg-blocks="calendar.views[0].blocks"
                        sg-click="list.openEvent(event, component)"
                        var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
                  </md-content>
                  <sg-calendar-month-event
                      sg-calendar-ghost="sg-calendar-ghost"
                      sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
                </sg-calendar-day>
              </md-grid-tile>
            </var:foreach>
          </var:foreach>
        </md-grid-list>
      </div>
    </md-content>
  </md-card>
</container>