ymanager/webapp/src/app/day-picker/day-picker.component.html @ f4741e5b

<div class="day-picker-container">
  <div class="row text-center day-picker-month-selection">
    <div class="col-4"></div>
    <div class="col-1">
      <button
        mat-icon-button
        mwlCalendarPreviousView
        [view]="view"
        [(viewDate)]="viewDate"
        (click)="setMonth(currentMonth - 1)"
      >
        <i class="material-icons change-month">navigate_before</i>
      </button>
    </div>
    <div class="col-2">
      <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
    </div>
    <div class="col-1">
      <button
        mat-icon-button
        mwlCalendarNextView
        [view]="view"
        [(viewDate)]="viewDate"
        (click)="setMonth(currentMonth + 1)"
      >
        <i class="material-icons change-month">navigate_next</i>
      </button>
      <div class="col-4"></div>
    </div>
  </div>

  <!-- Refresh attribute for localization purposes (refresh component after change of language) -->
  <mwl-calendar-month-view
    [viewDate]="viewDate"
    [locale]="locale"
    [refresh]="localizationService.currentLanguageSubject"
    [events]="events"
    [cellTemplate]="customCellTemplate"
    (dayClicked)="dayClicked($event.day)"
    weekStartsOn="1"
  >
  </mwl-calendar-month-view>

  <ng-template #customCellTemplate let-day="day" let-locale="locale">
    <div class="cal-cell-top">
      <span class="cal-day-number">
        {{ day.date | calendarDate:'monthViewDayNumber':locale }}
      </span>
    </div>
      <span class="vacation-type" *ngFor="let event of day.events">
        <i class="material-icons sickday" *ngIf="event.title == vacationType.SICKDAY">local_hospital</i>
        <i class="material-icons vacation" *ngIf="event.title == vacationType.VACATION">beach_access</i>

        {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
      </span>
  </ng-template>
</div>