<mat-toolbar>
   Location Schedule:
    <div ngbDropdown class="dropdown">
      <button ngbDropdownToggle type="button" class="btn btn-primary" id="systemDropdownMenu" aria-expanded="false">
      {{ currentLocation }}
      </button>
      <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
        <li *ngFor="let location of locations; index as i;">
          <a ngbDropdownItem (click)=getLocationSchedule(location,i)> {{ location }} </a>
        </li>
      </ul>
    </div>
</mat-toolbar>
<mat-toolbar>
  System Schedule:
   <div ngbDropdown class="dropdown">
     <button ngbDropdownToggle type="button" class="btn btn-primary" id="systemDropdownMenu" aria-expanded="false">
     {{ currentSystemName }}
     </button>
     <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
       <li>
         <a ngbDropdownItem (click)="filterScheduleBySystem('All')"> All </a>
       </li>
       <li *ngFor="let sys of systemsInLocation">
         <a ngbDropdownItem (click)=filterScheduleBySystem(sys.id)> {{ sys.id }} </a>
       </li>
     </ul>
   </div>
</mat-toolbar>
<div style="padding-top: 2%">
  <mwl-calendar-header [(view)]="view" [(viewDate)]="viewDate">
  </mwl-calendar-header>

  <div id="Calendar" [ngSwitch]="view">
    <mwl-calendar-month-view
      *ngSwitchCase="'month'"
      [viewDate]="viewDate"
      [events]="events"
      [refresh]="refresh"
      (dayClicked)="gotoDay($event.day.date)"
    >
    </mwl-calendar-month-view>
    <mwl-calendar-week-view
      precision="minutes"
      *ngSwitchCase="'week'"
      [viewDate]="viewDate"
      [events]="events"
      [refresh]="refresh"
      (dayHeaderClicked)="gotoDay($event.day.date)"
    >
    </mwl-calendar-week-view>
    <mwl-calendar-day-view
      *ngSwitchCase="'day'"
      [viewDate]="viewDate"
      [events]="events"
      [refresh]="refresh"
    >
    </mwl-calendar-day-view>
  </div>
</div>