bradberger/angular-material-calendar

<md-content layout='column' layout-fill md-swipe-left='next()' md-swipe-right='prev()'>
    <md-toolbar>
        <div class='md-toolbar-tools' layout='row'>
            <md-button class="md-icon-button" ng-click='prev()' aria-label="Previous month">
                <md-tooltip ng-if="::tooltips()">Previous month</md-tooltip>
                <md-icon md-svg-icon="md-tabs-arrow" ></md-icon>
            </md-button>
            <div flex></div>
            <h2 class='calendar-md-title'><span>{{ calendar.start | date:titleFormat:timezone }}</span></h2>
            <div flex></div>
            <md-button class="md-icon-button" ng-click='next()' aria-label="Next month">
                <md-tooltip ng-if="::tooltips()">Next month</md-tooltip>
                <md-icon md-svg-icon="md-tabs-arrow" class="moveNext"></md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <!-- agenda view -->
    <md-content ng-if='weekLayout === columnWeekLayout' class='agenda'>
        <div ng-repeat='week in calendar.weeks track by $index'>
            <div ng-if="sameMonth(day)" ng-class='{"disabled" : isDisabled(day), active: active === day, "has-events": hasEvents(day) }' ng-click='handleDayClick(day)' ng-repeat='day in week' layout>
                <md-tooltip ng-if="::tooltips()">{{ day | date:dayTooltipFormat:timezone }}</md-tooltip>
                <div>{{ day | date:dayFormat:timezone }}</div>
                <div flex compile='dataService.data[dayKey(day)]'></div>
            </div>
        </div>
    </md-content>
    <!-- calendar view -->
    <md-content ng-if='weekLayout !== columnWeekLayout' flex layout="column" class='calendar'>
        <div layout='row' class='subheader'>
            <div layout-padding class='subheader-day' flex ng-repeat='day in calendar.weeks[0]'>
              <md-tooltip ng-if="::tooltips()">{{ day | date:dayLabelTooltipFormat }}</md-tooltip>
              {{ day | date:dayLabelFormat }}
            </div>
        </div>
        <div ng-if='week.length' ng-repeat='week in calendar.weeks track by $index' flex layout='row'>
            <div tabindex='{{ sameMonth(day) ? (day | date:dayFormat:timezone) : 0 }}' ng-repeat='day in week track by $index' ng-click='handleDayClick(day)' flex layout layout-padding ng-class='{"disabled" : isDisabled(day), "active": isActive(day), "has-events": hasEvents(day), "md-whiteframe-12dp": hover || focus }' ng-focus='focus = true;' ng-blur='focus = false;' ng-mouseleave="hover = false" ng-mouseenter="hover = true">
                <md-tooltip ng-if="::tooltips()">{{ day | date:dayTooltipFormat }}</md-tooltip>
                <div>{{ day | date:dayFormat }}</div>
                <div flex compile='dataService.data[dayKey(day)]' id='{{ day | date:dayIdFormat }}'></div>
            </div>
        </div>
    </md-content>
</md-content>