Projekt

Obecné

Profil

Stáhnout (1.85 KB) Statistiky
| Větev: | Tag: | Revize:
1
<div class="day-picker-container">
2
  <div class="row text-center day-picker-month-selection">
3
    <div class="col-4"></div>
4
    <div class="col-1">
5
      <button
6
        mat-icon-button
7
        mwlCalendarPreviousView
8
        [view]="view"
9
        [(viewDate)]="viewDate"
10
        (click)="setMonth(currentMonth - 1)"
11
      >
12
        <i class="material-icons change-month">navigate_before</i>
13
      </button>
14
    </div>
15
    <div class="col-2">
16
      <span id="day-picker-date">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale }}</span>
17
    </div>
18
    <div class="col-1">
19
      <button
20
        mat-icon-button
21
        mwlCalendarNextView
22
        [view]="view"
23
        [(viewDate)]="viewDate"
24
        (click)="setMonth(currentMonth + 1)"
25
      >
26
        <i class="material-icons change-month">navigate_next</i>
27
      </button>
28
      <div class="col-4"></div>
29
    </div>
30
  </div>
31

    
32
  <!-- Refresh attribute for localization purposes (refresh component after change of language) -->
33
  <mwl-calendar-month-view
34
    [viewDate]="viewDate"
35
    [locale]="locale"
36
    [refresh]="localizationService.currentLanguageSubject"
37
    [events]="events"
38
    [cellTemplate]="customCellTemplate"
39
    (dayClicked)="dayClicked($event.day)"
40
    weekStartsOn="1"
41
  >
42
  </mwl-calendar-month-view>
43

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

    
54
        {{ event.start | date:'HH:mm' }} - {{ event.end | date:'HH:mm' }}
55
      </span>
56
  </ng-template>
57
</div>
(1-1/4)