Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

Calendar

Used to display an inline calendar for selecting dates or date ranges.

SourceStorybookRecipe
AI TipWant to skip the docs? Use the MCP Server
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

Usage

The calendar is an inline variant of the DatePicker component. Set the inline prop on DatePicker.Root to render the calendar directly on the page without the input, positioner, and content parts.

import { DatePicker } from "@chakra-ui/react"
<DatePicker.Root inline>
  <DatePicker.View view="day">
    <DatePicker.Header />
    <DatePicker.DayTable />
  </DatePicker.View>
  <DatePicker.View view="month">
    <DatePicker.Header />
    <DatePicker.MonthTable />
  </DatePicker.View>
  <DatePicker.View view="year">
    <DatePicker.Header />
    <DatePicker.YearTable />
  </DatePicker.View>
</DatePicker.Root>

Examples

Sizes

Use the size prop to control the calendar cell and control sizes.

xs
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
sm
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
md
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
lg
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
xl
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

Hide Outside Days

Set the hideOutsideDays prop to hide dates that fall outside the current month.

23
24
25
26
27
28
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

Controlled

Use the value and onValueChange props to control the inline calendar.

Selected: 2025-03-15

23
24
25
26
27
28
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

Default Value

Use the defaultValue prop to set the initially selected date.

23
24
25
26
27
28
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

Range Selection

Set the selectionMode prop to "range" to allow selecting a date range.

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

Multi Selection

Set the selectionMode prop to "multiple" to allow selecting multiple dates.

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

Min and Max

Use the min and max props to restrict the selectable date range.

23
24
25
26
27
28
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

Unavailable Dates

Use the isDateUnavailable prop to disable specific dates based on custom logic.

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

Multiple Months

Use the numOfMonths prop to display multiple months side by side.

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
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
1
2

Locale

Use the locale prop to customize for different languages and regional formats.

23
24
25
26
27
28
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

Max Selected Dates

Use the maxSelectedDates prop with selectionMode="multiple" to limit the number of dates that can be selected.

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

Week Numbers

Use the showWeekNumbers prop to display ISO week numbers alongside the calendar rows.

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

Booking Time Grid

Here's an example of a Calendly-style booking interface with an inline calendar and a scrollable time slot grid.

Select a Date

Pick a day for your meeting

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
1
2
3
4
UTC

Select a date

Available time slots will appear here

Props

The Calendar shares the same props and anatomy as the DatePicker. Refer to the DatePicker docs for the full prop reference.

Previous

Date Picker

Next

Checkbox