Calendar Module Name: CalendarModule

Module Name: CalendarModule

The Calendar is a form component that represents a graphical Gregorian calendar.

Showcase
Basic
January 2025
SUNMONTUEWEDTHUFRISAT
29
5
12
19
26
2
30
6
13
20
27
3
31
7
14
21
28
4
1
8
15
22
29
5
2
9
16
23
30
6
3
10
17
24
31
7
4
11
18
25
1
8
<tl-calendar></tl-calendar>
Without Today Button
January 2025
SUNMONTUEWEDTHUFRISAT
29
5
12
19
26
2
30
6
13
20
27
3
31
7
14
21
28
4
1
8
15
22
29
5
2
9
16
23
30
6
3
10
17
24
31
7
4
11
18
25
1
8
<tl-calendar [todayButton]="false"></tl-calendar>
With Status
January 2025
SUNMONTUEWEDTHUFRISAT
29
5
12
19
26
2
30
6
13
20
27
3
31
7
14
21
28
4
1
8
15
22
29
5
2
9
16
23
30
6
3
10
17
24
31
7
4
11
18
25
1
8
<tl-calendar></tl-calendar>
With Holiday
January 2025
SUNMONTUEWEDTHUFRISAT
29
5
12
19
26
2
30
6
13
20
27
3
31
7
14
21
28
4
1
8
15
22
29
5
2
9
16
23
30
6
3
10
17
24
31
7
4
11
18
25
1
8
<tl-calendar [holidays]="holidaysArray"></tl-calendar>
Properties
NameTypeDefaultDescriptionOptions
dateDateCurrent DayDate Object to be represented on calendar Date
heightstring260pxCalendar height. px | % | em
holidaysArray<CalendarHolidays>nullHoliday used as indication on cell, can pass a tooltip to describe the holiday Array<CalendarHolidays>
statusArray<CalendarStatus>nullStatus used as indication on cell Array<CalendarStatus>
todayButtonbooleantrueDisplays a footer with a today button. true | false
widthstring260pxCalendar width. px | % | em
Events
NameParametersDescription
selectDay
year : Full Year selected
month : Number of month selected
day : Number of day selected
fullDate : Default format date
Dispatched when day cell is clicked.
today
year : Full Year selected
month : Number of month selected
day : Number of day selected
fullDate : Default format date
Dispatched when today button is clicked.