Open studio

Calendar

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

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

Installation

Set up dotUI first — export your design system from the Studio, which registers @dotui in your project. See Installation.

pnpm dlx 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"

function Example() {
  const [value, setValue] = useState<DateValue>(parseDate("2020-02-03"))

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

Scheduler

Schedule, October 2026

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

Friday, October 16

4 events

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

Date and time

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

With pricing

Stay, October 2026

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

Multiple months

Trip dates, October to November 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
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
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
'single' | 'visible'
"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
'single' | 'visible'
"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 10/15/2026