<ion-content class="merms-calendar-page">
  <div class="container">
    <ion-grid class="top-container">
      <ion-row>
        <ion-col size="2" class="navigation">
          <ion-back-button text="" (click)="goBack()"></ion-back-button>
        </ion-col>
        <ion-col size="8" class="page-title">Calendar</ion-col>
      </ion-row>
    </ion-grid>

    <calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
      (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)" startHour="6"
      endHour="20" step="30" startingDayWeek="1">
    </calendar>


    <ion-list>
      <ion-list-header>
        <hr size="1">
      </ion-list-header>

      <ion-item *ngFor="let type of calendarData" (click)="goPatient(type)">
        <ion-avatar slot="start">
          <img src="./../../assets/imgs/avatar.svg">
        </ion-avatar>
        <ion-label>
          <h2>{{type.firstname}} {{type.lastname}}</h2>
          <h3>{{type.reason}}</h3>
          <p>{{type.appt}} {{type.gender}} , {{type.age}} yrs</p>
        </ion-label>
      </ion-item>


    </ion-list>

  </div>


</ion-content>