Calendar
A standalone calendar grid used internally by DatePicker and DateRangePicker. Can also be used independently to display a month view.
Basic Usage
일
월
화
수
목
금
토
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
8
9
10
11
With Selected Date
일
월
화
수
목
금
토
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
8
9
10
11
English Locale
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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
8
9
10
11
Mobile considerations
- Day cells scale to a 44×44px minimum on
pointer:coarseso each date is finger-tappable. - Used internally by both DatePicker (
mobileVariant="modal") and DateRangePicker (2-step modal flow). - Hover-based range highlighting (
hoverDate+onDateHover) is desktop-only — on touch, range selection works via tap-start → tap-end without a hover state in between.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentMonth | number | - | Month to display (0-indexed, 0 = January) |
currentYear | number | - | Year to display |
selectedDate | Date | null | - | Currently selected date |
selectedRange | { start: Date | null; end: Date | null } | - | Selected date range (for range picker) |
hoverDate | Date | null | - | Currently hovered date (for range highlighting) |
minDate | Date | - | Minimum selectable date |
maxDate | Date | - | Maximum selectable date |
onDateClick | (date: Date) => void | - | Callback when a date is clicked |
onDateHover | (date: Date) => void | - | Callback when a date is hovered |
locale | string | 'ko-KR' | Locale for day labels |
className | string | - | Additional CSS class |