119k
New

Calendar

PreviousNext

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

Base UIReact AriaRadix UI

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

import * as React from "react"

Installation

pnpm dlx shadcn@latest add 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.

۱۴۰۴ جوزا

۲۷
۲۸
۲۹
۳۰
۳۱
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۱
۲
۳
۴
۵
۶
"use client"

import * as React from "react"

Basic

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

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

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

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

Presets

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
2
3
4
5
6
7
8
"use client"

import * as React from "react"

Date and Time Picker

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
"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]"
/>

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

See also the International Calendars Guide for enabling the international calendars such as Persian / Hijri / Jalali.

يوليو 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
"use client"

import * as React from "react"

API Reference

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