src/app/custom_modules/calendar/calendar.component.html

<!--
******************************************************************************
* Copyright © 2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* 
*     http://www.eclipse.org/legal/epl-v10.html
* 
******************************************************************************
-->
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <div>
        <div class="row text-center">
          <div class="col-md-4">
            <div class="btn-group paging">
              <div class="btn btn-primary" mwlCalendarPreviousView [view]="view" [(viewDate)]="currDate" (viewDateChange)="activeDayIsOpen = false">
                {{view === 'week' ? 'Vorherige' : 'Vorheriger'}}
              </div>
              <div class="btn btn-primary" mwlCalendarToday [(viewDate)]="currDate">
                {{view === 'week' ? 'Aktuelle' : 'Aktueller'}}
              </div>
              <div class="btn btn-primary" mwlCalendarNextView [view]="view" [(viewDate)]="currDate" (viewDateChange)="activeDayIsOpen = false">
                {{view === 'week' ? 'Nächste' : 'Nächster'}}
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <h3>{{ currDate | calendarDate:(view + 'ViewTitle'):'de-DE' }}</h3>
          </div>
          <div class="col-md-4">
            <div class="btn-group period">
              <div class="btn btn-primary" (click)="view = 'month'" [class.active]="view === 'month'">
                Monat
              </div>
              <div class="btn btn-primary" (click)="view = 'week'" [class.active]="view === 'week'">
                Woche
              </div>
              <div class="btn btn-primary" (click)="view = 'day'" [class.active]="view === 'day'">
                Tag
              </div>
            </div>
          </div>
        </div>
      </div>
    </h4>
  </div>
  <div id="collapse4" class="panel-collapse collapse in">

    <div class="panel-body">

      <div [ngSwitch]="view">
        <mwl-calendar-month-view [weekStartsOn]="weekStartsOn" [locale]="locale" *ngSwitchCase=" 'month' " [viewDate]="currDate"
          [events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (eventClicked)="eventClicked( 'Clicked', $event.event)"
          (dayClicked)="dayClicked($event.day)" (eventTimesChanged)="eventTimesChanged($event)">
        </mwl-calendar-month-view>
        <mwl-calendar-week-view [weekStartsOn]="weekStartsOn" [locale]="locale" *ngSwitchCase=" 'week' " [viewDate]="currDate" [events]="events"
          [refresh]="refresh" (eventTimesChanged)="eventTimesChanged($event)" (eventClicked)="eventClicked( 'Clicked', $event.event)">
        </mwl-calendar-week-view>
        <mwl-calendar-day-view [locale]="locale" *ngSwitchCase=" 'day' " [viewDate]="currDate" [events]="events" [refresh]="refresh"
          (eventTimesChanged)="eventTimesChanged($event)" (eventClicked)="eventClicked( 'Clicked', $event.event)">

        </mwl-calendar-day-view>
      </div>
    </div>
  </div>
</div>

<br>