<div class="externalEventContent-w" [ngClass]="{'eventContentChange-w': showDetailsEvent}">
  
    <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">&times;</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 text-center">
      <div class="col-md-12">
        <h3>{{ viewDate | calendarDate:(view + 'ViewTitle') }}</h3>
      </div>
    </div>

    <div [ngSwitch]="view">
      <mwl-calendar-month-view
        *ngSwitchCase="CalendarView.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="CalendarView.Week"
        [viewDate]="viewDate"
        [events]="events"
        [refresh]="refresh"
        (eventClicked)="handleEvent('Clicked', $event.event)"
        (eventTimesChanged)="eventTimesChanged($event)">
      </mwl-calendar-week-view>
      <mwl-calendar-day-view
        *ngSwitchCase="CalendarView.Day"
        [viewDate]="viewDate"
        [events]="events"
        [refresh]="refresh"
        (eventClicked)="handleEvent('Clicked', $event.event)"
        (eventTimesChanged)="eventTimesChanged($event)">
      </mwl-calendar-day-view>
    </div>
        
    <div class="popUp" *ngIf="showDetailsEvent">
      <h1 class="text-center">{{dataLecture.title}}</h1>
      <p [innerHTML]="dataLecture.description"></p>
      <button class="btn btn-danger" (click)="closeDetailEvent()"><i class="fas fa-times-circle"></i></button>
    </div>
    
  </div>
  


