Skip to content
Data Input

Calendar

Month grid for selecting a single date.

React source Core source

Calendar

Standalone month-grid date picker — no popover, no text input. Compose with form chrome elsewhere when you need a labeled field; use DateInput when you want segmented typing plus a calendar popover.

Examples

Default

Control selection with value / onChange and @internationalized/date (CalendarDate). Provide an aria-label when there is no visible label.

Pick a day, August 2026

26
27
28
29
30
31
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
Demo.tsxtsx
import { CalendarDate } from '@internationalized/date';
import { Calendar } from '@var-ui/react';

<Calendar aria-label="Pick a day" value={value} onChange={setValue} />

Minimum date

Pass minValue to block dates before a bound. Past (or earlier) days are unavailable while the selected value stays controlled.

Pick a day, August 2026

26
27
28
29
30
31
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
Demo.tsxtsx
import { CalendarDate } from '@internationalized/date';
import { Calendar } from '@var-ui/react';

<Calendar
  aria-label="Pick a day"
  value={value}
  onChange={setValue}
  minValue={new CalendarDate(2026, 8, 1)}
/>

Props

Accessibility

Built on React Aria Calendar. Cells are keyboard-navigable within the grid; previous/next month controls are labeled buttons. Always supply a visible label or aria-label. Pair with minValue / maxValue when the allowed range matters — unavailable dates are announced as disabled.