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
Name | Type | Default | Description | Options |
---|---|---|---|---|
date | Date | Current Day | Date Object to be represented on calendar | Date |
height | string | 260px | Calendar height. | px | % | em |
holidays | Array<CalendarHolidays> | null | Holiday used as indication on cell, can pass a tooltip to describe the holiday | Array<CalendarHolidays> |
status | Array<CalendarStatus> | null | Status used as indication on cell | Array<CalendarStatus> |
todayButton | boolean | true | Displays a footer with a today button. | true | false |
width | string | 260px | Calendar width. | px | % | em |
Events
Name | Parameters | Description |
---|---|---|
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. |