<div id="calendar">
    <h2>Termin-Kalender</h2>
    <div class="form user-filter">
        <div>
            <label for="mcCalendarUser"><strong>PLP Mitarbeiter</strong></label>
            <select id="mcCalendarUser" name="mcCalendarUser" [(ngModel)]="selectedUserIndex" (change)="changeUserFilter($event)" #mcCalendarUser="ngModel">
                <option [ngValue]=null>Alle</option>
                <option *ngFor="let u of selectableUsers; let i = index" value="{{i+1}}">{{u.firstname}} {{u.lastname}}</option>
            </select>
        </div>
    </div>
    <app-calendar-legend></app-calendar-legend>
    <div class="c-filter-box">
        <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'de' }}</h3>
        <div class="c-filter-box--buttons">
            <div class="button" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()">
                &#x2190; Vorheriger Monat
            </div>
            <div class="button" mwlCalendarToday [(viewDate)]="viewDate">
                Dieser Monat
            </div>
            <div class="button" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="closeOpenMonthViewDay()">
                Nächster Monat &#x2192;
            </div>
        </div>
    </div>
    <div [ngSwitch]="view">
        <mwl-calendar-month-view
            *ngSwitchCase="CalendarView.Month"
            [viewDate]="viewDate"
            [events]="events"
            [locale]="locale"
            [weekStartsOn]="weekStartsOn"
            [weekendDays]="weekendDays"
            [refresh]="refresh"
            [activeDayIsOpen]="activeDayIsOpen"
            (dayClicked)="dayClicked($event.day)"
            (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)"
        >
        </mwl-calendar-month-view>
    </div>
</div>
