Calendar

A calendar allows a user to select a single date value.

Date, July 2026

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
<Calendar aria-label="Date" />

Installation

npx shadcn@latest add @dotui/calendar

Usage

Use Calendar to allow users to select a single date value.

import { Calendar } from '@/components/ui/calendar'
<Calendar aria-label="Date" />

Use RangeCalendar to let users select a contiguous range of dates.

import { RangeCalendar } from '@/components/ui/calendar'
<RangeCalendar aria-label="Date range" />

Composition

For full control, compose the calendar from its parts.

import {
  Calendar,
  CalendarHeader,
  CalendarHeading,
  CalendarGrid,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarGridBody,
  CalendarCell,
} from '@/components/ui/calendar'
<Calendar>
  <CalendarHeader>
    <Button slot="previous">
      <ChevronLeftIcon />
    </Button>
    <CalendarHeading />
    <Button slot="next">
      <ChevronRightIcon />
    </Button>
  </CalendarHeader>
  <CalendarGrid>
    <CalendarGridHeader>
      {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</Calendar>

Value

Calendar values use @internationalized/date objects. Pass defaultValue for uncontrolled state, or value with onChange to control it.

import { parseDate } from '@internationalized/date'
;<Calendar defaultValue={parseDate('2020-02-03')} />
import { useState } from 'react'
import { parseDate } from '@internationalized/date'
import type { DateValue } from 'react-aria-components'

const [value, setValue] = useState<DateValue>(parseDate('2020-02-03'))

;<Calendar value={value} onChange={setValue} />

Date availability

Constrain the selectable range with minValue and maxValue, or disable individual dates with isDateUnavailable. All take @internationalized/date values, so derive them from today(getLocalTimeZone()).

import { getLocalTimeZone, today } from '@internationalized/date'

const now = today(getLocalTimeZone())

;<Calendar
  minValue={now}
  maxValue={now.add({ months: 1 })}
  isDateUnavailable={(date) =>
    [0, 6].includes(date.toDate(getLocalTimeZone()).getDay())
  }
/>

Examples

Range

Trip dates, July 2026

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

Scheduler

Schedule, July 2026

28
29
30
1
2
3
4
5
6
7
Standup
8
9
Design review1:1 with Sam+2 more
10
Sprint planning
11
12
Ship v2.1
13
Customer call
14
15
16
Team offsite
17
18
Board meeting
19
20
21
22
23
Launch review
24
25
26
27
28
29
30
31
1

Thursday, July 9

4 events

  • Design review
  • 1:1 with Sam
  • Product sync
  • Lunch w/ Alex

Date and time

Date, July 2026

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
Start time
1145AM
End time
130PM

With pricing

Stay, July 2026

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

Multiple months

Trip dates, July to August 2026

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

API Reference

Calendar

A calendar displays one or more date grids and allows users to select a single date.

PropType
ReactNode | function
function
DateValue | null
union
DateValue | null
function
boolean
boolean
PageBehavior
"center" | "end" | "start"
DateDuration
number
"single"
T | null
T | null
function

RangeCalendar

A range calendar displays one or more date grids and allows users to select a contiguous range of dates.

PropType
boolean
ReactNode | function
"clear" | "reset" | "select"
function
DateValue | null
union
DateValue | null
union
boolean
boolean
PageBehavior
"center" | "end" | "start"
DateDuration
number
RangeValue<T> | null
RangeValue<T> | null
function

CalendarHeader

The header of a calendar, containing the navigation buttons and the heading.

Supports all header attributes.

PropType

CalendarGrid

A calendar grid displays a single grid of days within a calendar or range calendar which can be keyboard navigated and selected by the user.

PropType
union
"long" | "narrow" | "short"

CalendarGridHeader

A calendar grid header displays a row of week day names at the top of a month.

PropType
function

CalendarHeaderCell

A calendar header cell displays a week day name at the top of a column within a calendar.

PropType
ReactNode

CalendarGridBody

A calendar grid body displays a grid of calendar cells within a month.

PropType
function

CalendarCell

A calendar cell displays a date cell within a calendar grid which can be selected by the user.

PropType
"accent" | "primary"
ReactNode | function
CalendarDate

Last updated on 7/7/2026