Dots

Calendar

PreviousNext

A calendar component that allows users to select a date or a range of dates.

November 2026

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
"use client"

import * as React from "react"

Installation

pnpm dlx shadcn@latest add @dots/calendar

Usage

import {
  getLocalTimeZone,
  today,
  type CalendarDate,
} from "@internationalized/date"
 
import { Calendar } from "@/components/ui/calendar"
const [date, setDate] = React.useState<CalendarDate | null>(
  today(getLocalTimeZone())
)
 
return (
  <Calendar value={date} onChange={setDate} className="rounded-lg border" />
)

See the React Aria documentation for more information.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

International Calendars

To use international calendar systems such as Persian, Islamic, or Buddhist, use React Aria's I18nProvider to set the locale. The calendar system comes from the locale's -u-ca- extension.

import { I18nProvider } from "react-aria-components"
 
import { Calendar } from "@/components/ui/calendar"
 
export function PersianCalendar() {
  return (
    <I18nProvider locale="fa-IR-u-ca-persian">
      <Calendar aria-label="Date" />
    </I18nProvider>
  )
}

Basic

A basic calendar component. We used className="rounded-lg border" to style the calendar.

November 2026

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
"use client"

import { Calendar } from "@/components/ui/calendar"

Range Calendar

Use the RangeCalendar component to enable range selection.

January to February 2026

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
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
"use client"

import * as React from "react"

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns.

November 2026

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
"use client"

import { Calendar } from "@/components/ui/calendar"

Presets

November 2026

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
6
7
8
9
10
11
12
"use client"

import * as React from "react"

Date and Time Picker

November 2026

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
"use client"

import * as React from "react"

Booked dates

February 2026

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
"use client"

import * as React from "react"

Custom Cell Size

December 2026

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

import * as React from "react"

You can customize the size of calendar cells using the --cell-size CSS variable. You can also make it responsive by using breakpoint-specific values:

<Calendar
  value={date}
  onChange={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>

Or use fixed values:

<Calendar
  value={date}
  onChange={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>

API Reference

See the React Aria documentation for more information on the Calendar component.