<div class="card"> <div class="card-body"> <ng-template #modalContent let-close="close"> <div class="modal-header"> <h5 class="modal-title">Event action occurred</h5> <button type="button" class="close" (click)="close()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div> Action: <pre>{{ modalData?.action }}</pre> </div> <div> Event: <pre>{{ modalData?.event | json }}</pre> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button> </div> </ng-template> <div class="row"> <div class="col-md-4"> <div class="btn-group"> <div class="btn btn-success" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="activeDayIsOpen = false"> Previous </div> <div class="btn btn-outline-secondary" mwlCalendarToday [(viewDate)]="viewDate"> Today </div> <div class="btn btn-info" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="activeDayIsOpen = false"> Next </div> </div> </div> <div class="col-md-4 text-center"> <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3> </div> <div class="col-md-4 text-right"> <div class="btn-group"> <div class="btn btn-info" (click)="view = 'month'" [class.active]="view === 'month'"> Month </div> <div class="btn btn-success" (click)="view = 'week'" [class.active]="view === 'week'"> Week </div> <div class="btn btn-warning" (click)="view = 'day'" [class.active]="view === 'day'"> Day </div> </div> </div> </div> <br> <div [ngSwitch]="view"> <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"> </mwl-calendar-month-view> <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"> </mwl-calendar-week-view> <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"> </mwl-calendar-day-view> </div> </div> </div>