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

Wednesday, July 15

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/9/2026