-
-
Notifications
You must be signed in to change notification settings - Fork 861
/
calendar-month-cell.component.ts
115 lines (104 loc) · 3.46 KB
/
calendar-month-cell.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import {
Component,
Input,
Output,
EventEmitter,
TemplateRef
} from '@angular/core';
import { MonthViewDay, CalendarEvent } from 'calendar-utils';
import { trackByEventId } from '../common/util';
import { PlacementArray } from 'positioning';
@Component({
selector: 'mwl-calendar-month-cell',
template: `
<ng-template
#defaultTemplate
let-day="day"
let-openDay="openDay"
let-locale="locale"
let-tooltipPlacement="tooltipPlacement"
let-highlightDay="highlightDay"
let-unhighlightDay="unhighlightDay"
let-eventClicked="eventClicked"
let-tooltipTemplate="tooltipTemplate"
let-tooltipAppendToBody="tooltipAppendToBody">
<div class="cal-cell-top">
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
<span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
</div>
<div class="cal-events" *ngIf="day.events.length > 0">
<div
class="cal-event"
*ngFor="let event of day.events; trackBy:trackByEventId"
[style.backgroundColor]="event.color?.primary"
[ngClass]="event?.cssClass"
(mouseenter)="highlightDay.emit({event: event})"
(mouseleave)="unhighlightDay.emit({event: event})"
[mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
[tooltipPlacement]="tooltipPlacement"
[tooltipEvent]="event"
[tooltipTemplate]="tooltipTemplate"
[tooltipAppendToBody]="tooltipAppendToBody"
mwlDraggable
[class.cal-draggable]="event.draggable"
dragActiveClass="cal-drag-active"
[dropData]="{event: event, draggedFrom: day}"
[dragAxis]="{x: event.draggable, y: event.draggable}"
(mwlClick)="eventClicked.emit({ event: event })">
</div>
</div>
</ng-template>
<ng-template
[ngTemplateOutlet]="customTemplate || defaultTemplate"
[ngTemplateOutletContext]="{
day: day,
openDay: openDay,
locale: locale,
tooltipPlacement: tooltipPlacement,
highlightDay: highlightDay,
unhighlightDay: unhighlightDay,
eventClicked: eventClicked,
tooltipTemplate: tooltipTemplate,
tooltipAppendToBody: tooltipAppendToBody
}">
</ng-template>
`,
host: {
class: 'cal-cell cal-day-cell',
'[class.cal-past]': 'day.isPast',
'[class.cal-today]': 'day.isToday',
'[class.cal-future]': 'day.isFuture',
'[class.cal-weekend]': 'day.isWeekend',
'[class.cal-in-month]': 'day.inMonth',
'[class.cal-out-month]': '!day.inMonth',
'[class.cal-has-events]': 'day.events.length > 0',
'[class.cal-open]': 'day === openDay',
'[class.cal-event-highlight]': '!!day.backgroundColor',
'[style.backgroundColor]': 'day.backgroundColor'
}
})
export class CalendarMonthCellComponent {
@Input()
day: MonthViewDay;
@Input()
openDay: MonthViewDay;
@Input()
locale: string;
@Input()
tooltipPlacement: PlacementArray;
@Input()
tooltipAppendToBody: boolean;
@Input()
customTemplate: TemplateRef<any>;
@Input()
tooltipTemplate: TemplateRef<any>;
@Output()
highlightDay: EventEmitter<any> = new EventEmitter();
@Output()
unhighlightDay: EventEmitter<any> = new EventEmitter();
@Output()
eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
event: CalendarEvent;
}>();
trackByEventId = trackByEventId;
}