-
Notifications
You must be signed in to change notification settings - Fork 2
/
calendar-base.ts
131 lines (114 loc) · 3.7 KB
/
calendar-base.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { Calendar, DateRangeDescriptor } from './calendar.model.js';
import { getWeekDayNumber } from './utils.js';
import { blazorDeepImport } from '../../common/decorators/blazorDeepImport.js';
import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
import { blazorSuppress } from '../../common/decorators/blazorSuppress.js';
import { watch } from '../../common/decorators/watch.js';
export const MONTHS_PER_ROW = 3;
export const YEARS_PER_ROW = 3;
export interface IgcCalendarBaseEventMap {
igcChange: CustomEvent<Date | Date[]>;
}
@blazorIndirectRender
@blazorDeepImport
export class IgcCalendarBaseComponent extends LitElement {
private _activeDate = new Date();
private _activeDateSetFlag = false;
protected calendarModel = new Calendar();
/**
* The current value of the calendar.
* Used when selection is set to single.
*/
@blazorSuppress()
@property({
converter: {
fromAttribute: (value: string) => (value ? new Date(value) : undefined),
toAttribute: (value: Date) => value.toISOString(),
},
})
public value?: Date;
//we suppress value for blazor since we need to expose it on the leaves with the events for now.
/**
* The current values of the calendar.
* Used when selection is set to multiple or range.
*/
@blazorSuppress()
@property({
converter: {
fromAttribute: (value: string) =>
!value
? undefined
: value
.split(',')
.map((v) => v.trim())
.filter((v) => v)
.map((v) => new Date(v)),
toAttribute: (value: Date[]) =>
value.map((v) => v.toISOString()).join(','),
},
})
public values?: Date[];
/** Sets the type of date selection. */
@property()
public selection: 'single' | 'multiple' | 'range' = 'single';
/** Show/hide the week numbers. */
@property({ type: Boolean, attribute: 'show-week-numbers', reflect: true })
public showWeekNumbers = false;
/** Sets the start day of the week. */
@property({ attribute: 'week-start' })
public weekStart:
| 'sunday'
| 'monday'
| 'tuesday'
| 'wednesday'
| 'thursday'
| 'friday'
| 'saturday' = 'sunday';
/** Sets the date which is shown in view and is highlighted. By default it is the current date. */
public set activeDate(val: Date) {
const oldVal = this._activeDate;
this._activeDate = val;
this._activeDateSetFlag = true;
this.requestUpdate('activeDate', oldVal);
}
@blazorSuppress()
@property({
attribute: 'active-date',
converter: {
fromAttribute: (value: string) => (value ? new Date(value) : new Date()),
toAttribute: (value: Date) => value.toISOString(),
},
})
public get activeDate(): Date {
return this._activeDate;
}
/** Sets the locale used for formatting and displaying the dates in the calendar. */
@property()
public locale = 'en';
/** Gets/sets disabled dates. */
@property({ attribute: false })
public disabledDates!: DateRangeDescriptor[];
/** Gets/sets special dates. */
@property({ attribute: false })
public specialDates!: DateRangeDescriptor[];
@watch('weekStart')
protected weekStartChange() {
this.calendarModel.firstWeekDay = getWeekDayNumber(this.weekStart);
}
@watch('selection', { waitUntilFirstUpdate: true })
protected selectionChange() {
this.value = undefined;
}
protected override async firstUpdated() {
if (this._activeDateSetFlag) {
return;
}
if (this.selection === 'single') {
this.activeDate = this.value ?? this.activeDate;
} else {
this.activeDate = this.values ? this.values[0] : this.activeDate;
}
}
}