Dasar UI Library
Calendar
A robust and fully customizable calendar component for displaying dates, scheduling, and acting as the core of date-pickers.Basic Dashboard Variant
Selected Date: Thursday, October 1, 2026
October 2026
27
Sunday
27-09-2026
28
Monday
28-09-2026
29
Tuesday
29-09-2026
30
Wednesday
30-09-2026
1
Thursday
01-10-2026
2
Friday
02-10-2026
3
Saturday
03-10-2026
4
04-10-2026
5
05-10-2026
6
06-10-2026
7
07-10-2026
8
08-10-2026
9
09-10-2026
10
10-10-2026
11
11-10-2026
12
12-10-2026
13
13-10-2026
14
14-10-2026
15
15-10-2026
16
16-10-2026
17
17-10-2026
18
18-10-2026
19
19-10-2026
20
20-10-2026
21
21-10-2026
22
22-10-2026
23
23-10-2026
24
24-10-2026
25
25-10-2026
26
26-10-2026
27
27-10-2026
28
28-10-2026
29
29-10-2026
30
30-10-2026
31
31-10-2026
1
01-11-2026
2
02-11-2026
3
03-11-2026
4
04-11-2026
5
05-11-2026
6
06-11-2026
7
07-11-2026
Compact Dropdown Variant
Dropdown Variant
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
1
2
3
4
5
6
7
Localization & Formatting (id-ID vs en-US)
id-ID (Indonesian)
Oktober 2026
Min
Sen
Sel
Rab
Kam
Jum
Sab
27
28
29
30
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
1
2
3
4
5
6
7
Format: dd MMMM yyyy
Selected:
en-US (American English)
Oct 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
1
2
3
4
5
6
7
Format: MM/dd/yyyy
Selected: October 1, 2026
Hiding Elements & Custom Styling
Hidden Header & Custom Styling
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
1
2
3
4
5
6
7
Complete Header Override
October 2026
27
Sunday
27-09-2026
28
Monday
28-09-2026
29
Tuesday
29-09-2026
30
Wednesday
30-09-2026
1
Thursday
01-10-2026
2
Friday
02-10-2026
3
Saturday
03-10-2026
4
04-10-2026
5
05-10-2026
6
06-10-2026
7
07-10-2026
8
08-10-2026
9
09-10-2026
10
10-10-2026
11
11-10-2026
12
12-10-2026
13
13-10-2026
14
14-10-2026
15
15-10-2026
16
16-10-2026
17
17-10-2026
18
18-10-2026
19
19-10-2026
20
20-10-2026
21
21-10-2026
22
22-10-2026
23
23-10-2026
24
24-10-2026
25
25-10-2026
26
26-10-2026
27
27-10-2026
28
28-10-2026
29
29-10-2026
30
30-10-2026
31
31-10-2026
1
01-11-2026
2
02-11-2026
3
03-11-2026
4
04-11-2026
5
05-11-2026
6
06-11-2026
7
07-11-2026
Custom Footers & Action Slots
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
1
2
3
4
5
6
7
Radius & Disabled States
Radius Full & Borderless
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
1
2
3
4
5
6
7
Disabled State
October 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
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
1
2
3
4
5
6
7
API Reference
Property | Type | Default | Description |
|---|---|---|---|
value | Date | string | number | null | null | The currently selected date. Supports Angular binding via [value] and (valueChange). |
variant | 'dashboard' | 'dropdown' | 'dashboard' | Adjusts layout. Dashboard is spacious, dropdown is compact for pickers. |
appearance | 'outline' | 'borderless' | 'outline' | Defines the outer border visual style of the container. |
radius | ScaleAttributeType | 'md' | Sets the border radius curve. |
locale | string | 'en-US' | Code used for localizing month names, weekdays, and formats (e.g., id-ID, en-US). |
header-format / value-format / weekday-format | string | varies | Date format strings for navigation, full dates, and weekdays. |
hide-header / hide-full-date | boolean | false | Hides top navigation or full date display. |
disabled | boolean | false | Disables all user interaction. |
full-width | boolean | false | Maximizes the width size of calendar. |
(valueChange) / (onMonthChange) / (onYearChange) | EventEmitter<Date> | - | Emitted during date selection and view navigation. |
[calendar-...-template] | TemplateRef<any> | - | Slot directives to override UI: header, today, prev/next buttons. Yields component context. |
[calendar-footer-slot] | Content Slot | - | Inject custom content (like action buttons) at the bottom. |