dotUI

Calendar

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

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, May 2026

26
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

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

Thursday, June 4

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
((identifier: CalendarIdentifier) => Calendar)
DateValue | null
union
DateValue | null
((date: DateValue) => boolean)
boolean
boolean
PageBehavior
DOMRenderFunction<"div", CalendarRenderProps<"single">>
"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"
((identifier: CalendarIdentifier) => Calendar)
DateValue | null
union
DateValue | null
union
boolean
boolean
PageBehavior
DOMRenderFunction<"div", RangeCalendarRenderProps>
"center" | "end" | "start"
DateDuration
number
RangeValue<T> | null
RangeValue<T> | null
function

CalendarHeader

Missing description.

Supports all header attributes.

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
DOMRenderFunction<"table", undefined>
"long" | "narrow" | "short"

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
DOMRenderFunction<"div", CalendarCellRenderProps>

Last updated on 6/4/2026