Calendar
A month grid for picking a day or a range, with limits and disabled days.Single day
Preview
Code
March 2026
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
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Calendar } from '@advui/core'
<Calendar value={day} onValueChange={setDay} min={new Date()} />Examples
Range with disabled weekends
Preview
Code
April 2026
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
API reference
Calendar
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'range' | 'single' | Pick one day, or a start and an end. |
value | Date | DateRange | null | — | The picked day, or `{ start, end }` in range mode, when you control it. Only the calendar day is used, not the time. |
defaultValue | Date | DateRange | null | — | The picked day or range at first, when the calendar manages it. |
onValueChange | (value) => void | — | Called when a day is picked. |
month | Date | — | The visible month, when you control it. |
defaultMonth | Date | — | The month shown first. Defaults to the picked day or today. |
onMonthChange | (month: Date) => void | — | Called when the visible month changes. |
min | Date | — | Earliest selectable day. |
max | Date | — | Latest selectable day. |
isDateDisabled | (date: Date) => boolean | — | Makes days unselectable, e.g. weekends. |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | First day of the week (0 = Sunday). |
locale | string | — | BCP 47 locale for month and day names. Defaults to the device. |
previousMonthLabel | string | 'Previous month' | Accessible name of the previous-month button. |
nextMonthLabel | string | 'Next month' | Accessible name of the next-month button. |
todayLabel | string | 'today' | Read after today’s date on iOS and Android ("…, today"), which have no `aria-current`. |
Accessibility
- On web it is a WAI-ARIA
gridlabelled by the month name, with one Tab stop. - Every day is named with its full date ("Monday, 28 September 2026"); the picked days have
aria-selected, today hasaria-current="date"(on iOS and Android, where that is not read, its name ends intodayLabel), and days outside the limits havearia-disabled. - The month name is a polite live region, so changing month is announced.
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | Previous / next day. |
| ArrowUp / ArrowDown | Same day of the previous / next week. |
| Home / End | First / last day of the week. |
| PageUp / PageDown | Previous / next month (with Shift: year). |
| Enter / Space | Picks the focused day. |
Platform notes
iOS
Each day is a button, so VoiceOver swipes through the days in order.
Android
Each day is a button, so TalkBack swipes through the days in order.