Skip to main content

dotUI

Calendar

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

On this page

Date, June 2026

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
<Calendar aria-label="Date" defaultValue={today(getLocalTimeZone())}>
  <CalendarHeader>
    <Button slot="previous" variant="quiet" isIconOnly>
      <ChevronLeftIcon />
    </Button>
    <CalendarHeading />
    <Button slot="next" variant="quiet" isIconOnly>
      <ChevronRightIcon />
    </Button>
  </CalendarHeader>
  <CalendarGrid>
    <CalendarGridHeader>
      {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</Calendar>

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 {
  CalendarHeader,
  CalendarGrid,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarGridBody,
  CalendarCell,
} from '@/components/ui/calendar'
<Calendar>
  <CalendarGrid>
    <CalendarHeader>
      <Button slot="previous"><ChevronLeftIcon /></Button>
      <CalendarHeading />
      <Button slot="next"><ChevronRightIcon /></Button>
    </CalendarHeader>
    <CalendarGridBody>
      <CalendarGridHeader>
      {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} />

Examples

Range

Trip dates, June 2026

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

Disabled

Date, June 2026

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

Multiple months

Trip dates, June to July 2026

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

Validation

Date, June 2026

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

We are closed on weekends

Min and max dates

Date, June 2026

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

Unavailable dates

Date, June 2026

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

Today indicator

Date, June 2026

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

Short weekdays

Date, June 2026

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

Internationalization (arabic)

التاريخ, يونيو ٢٠٢٦

٣٠
٣١
١
٢
٣
٤
٥
٦
٧
٨
٩
١٠
١١
١٢
١٣
١٤
١٥
١٦
١٧
١٨
١٩
٢٠
٢١
٢٢
٢٣
٢٤
٢٥
٢٦
٢٧
٢٨
٢٩
٣٠
١
٢
٣

Month and year dropdowns

Date, June 2026

dropdowns
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

With presets

Date, June 2026

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

Custom days

Stay, June 2026

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

Scheduler

Schedule, June 2026

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

Friday, June 19

4 events

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

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 6/16/2026