-
-
Notifications
You must be signed in to change notification settings - Fork 863
/
calendarMonthCell.component.ts
99 lines (88 loc) · 3 KB
/
calendarMonthCell.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
import {
Component,
Input,
Output,
EventEmitter,
TemplateRef
} from '@angular/core';
import { MonthViewDay, CalendarEvent } from 'calendar-utils';
@Component({
selector: 'mwl-calendar-month-cell',
template: `
<ng-template #defaultTemplate>
<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"
[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
[dropData]="{event: event}"
[dragAxis]="{x: event.draggable, y: event.draggable}"
(mwlClick)="onEventClick($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',
'[style.backgroundColor]': 'day.backgroundColor'
}
})
export class CalendarMonthCellComponent {
@Input() day: MonthViewDay;
@Input() openDay: MonthViewDay;
@Input() locale: string;
@Input() tooltipPlacement: string;
@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;
}>();
/**
* @hidden
*/
onEventClick(mouseEvent: MouseEvent, calendarEvent: CalendarEvent): void {
if (mouseEvent.stopPropagation) {
mouseEvent.stopPropagation();
}
this.eventClicked.emit({ event: calendarEvent });
}
}