Get started
Fabricator UI

Search documentation

Search pages, components, blocks, styles and colours.

Calendar

PreviousNext

A calendar component that allows users to select a date or a range of dates.

Base UIReact AriaRadix UI

October 2026

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

Installation

bunx --bun fabricator-ui@latest add calendar

Usage

import {
  getLocalTimeZone,
  today,
  type CalendarDate,
} from "@internationalized/date"
 
import { Calendar } from "@/components/ui/calendar"
const [date, setDate] = React.useState<CalendarDate | null>(
  today(getLocalTimeZone())
)
 
return (
  <Calendar value={date} onChange={setDate} className="rounded-lg border" />
)

See the React Aria documentation for more information.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Basic

A basic calendar component. We used className="rounded-lg border" to style the calendar.

October 2026

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

Range Calendar

Use the RangeCalendar component to enable range selection.

January to February 2026

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
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns.

October 2026

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

Presets

October 2026

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

Date and Time Picker

October 2026

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

Booked dates

February 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

Custom Cell Size

December 2026

29
30
1$100
2$100
3$100
4$100
5$120
6$120
7$100
8$100
9$100
10$100
11$100
12$120
13$120
14$100
15$100
16$100
17$100
18$100
19$120
20$120
21$100
22$100
23$100
24$100
25$100
26$120
27$120
28$100
29$100
30$100
31$100
1
2

You can customize the size of calendar cells using the --cell-size CSS variable. You can also make it responsive by using breakpoint-specific values:

<Calendar
  value={date}
  onChange={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

Or use fixed values:

<Calendar
  value={date}
  onChange={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

API Reference

See the React Aria documentation for more information on the Calendar component.