fuse-angular/src/app/main/content/apps/calendar/calendar.component.html

<div id="calendar" class="page-layout simple fullwidth" perfect-scrollbar>

    <!-- HEADER -->
    <div class="header" [ngClass]="viewDate | date:'MMM'">

        <div class="header-content" fxLayout="column" fxLayoutAlign="space-between">

            <div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">

                <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">

                    <md-icon class="logo-icon">today</md-icon>

                    <span class="logo-text">Calendar</span>

                </div>

                <!-- TOOLBAR -->
                <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">

                    <button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
                        <md-icon>search</md-icon>
                    </button>

                    <button md-button class="mat-icon-button"
                            mwlCalendarToday
                            [(viewDate)]="viewDate"
                            (viewDateChange)="selectedDay = {date:$event}"
                            aria-label="Today" md-tooltip="Today">
                        <!--(click)="selectedDay = viewDate"-->
                        <md-icon>today</md-icon>
                    </button>

                    <button md-button class="mat-icon-button" (click)="view='day'"
                            aria-label="Day" md-tooltip="Day">
                        <md-icon>view_day</md-icon>
                    </button>

                    <button md-button class="mat-icon-button" (click)="view='week'"
                            aria-label="Week" md-tooltip="Week">
                        <md-icon>view_week</md-icon>
                    </button>

                    <button md-button class="mat-icon-button" (click)="view='month'"
                            aria-label="Month" md-tooltip="Month">
                        <md-icon>view_module</md-icon>
                    </button>
                </div>
            </div>
            <!-- / TOOLBAR -->

            <!-- HEADER BOTTOM -->
            <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center">

                <button md-button class="mat-icon-button arrow"
                        mwlCalendarPreviousView
                        [view]="view"
                        [(viewDate)]="viewDate"
                        (viewDateChange)="selectedDay = {date:$event}"
                        aria-label="Previous">
                    <md-icon>chevron_left</md-icon>
                </button>

                <div class="title">
                    {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
                </div>

                <button md-button class="mat-icon-button arrow"
                        mwlCalendarNextView
                        [view]="view"
                        [(viewDate)]="viewDate"
                        (viewDateChange)="selectedDay = {date:$event}"
                        aria-label="Next">
                    <md-icon>chevron_right</md-icon>
                </button>
            </div>
            <!-- / HEADER BOTTOM -->
        </div>

        <!-- ADD EVENT BUTTON -->
        <button md-fab class="add-event-button mat-warn" (click)="addEvent($event)" aria-label="Add event">
            <md-icon>add</md-icon>
        </button>
        <!-- / ADD EVENT BUTTON -->
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content" perfect-scrollbar>
        <div [ngSwitch]="view">
            <mwl-calendar-month-view
                *ngSwitchCase="'month'"
                [viewDate]="viewDate"
                [events]="events"
                [refresh]="refresh"
                [activeDayIsOpen]="activeDayIsOpen"
                (dayClicked)="dayClicked($event.day)"
                (eventClicked)="editEvent('edit', $event.event)"
                (eventTimesChanged)="eventTimesChanged($event)"
                (beforeViewRender)="beforeMonthViewRender($event)">
            </mwl-calendar-month-view>
            <mwl-calendar-week-view
                *ngSwitchCase="'week'"
                [viewDate]="viewDate"
                (viewDateChange)="selectedDay = {date:$event}"
                [events]="events"
                [refresh]="refresh"
                (dayClicked)="dayClicked($event.day)"
                (eventClicked)="editEvent('edit', $event.event)"
                (eventTimesChanged)="eventTimesChanged($event)">
            </mwl-calendar-week-view>
            <mwl-calendar-day-view
                *ngSwitchCase="'day'"
                [viewDate]="viewDate"
                (viewDateChange)="selectedDay = {date:$event}"
                [events]="events"
                [refresh]="refresh"
                (dayClicked)="dayClicked($event.day)"
                (eventClicked)="editEvent('edit', $event.event)"
                (eventTimesChanged)="eventTimesChanged($event)">
            </mwl-calendar-day-view>
        </div>
    </div>
    <!-- / CONTENT -->
</div>