125k

Calendar

PreviousNext

日付または日付範囲を選択できるカレンダーコンポーネントです。

BaseRadixReact Aria

September 2026

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

import * as React from "react"

インストール

pnpm dlx shadcn@latest add calendar

使用法

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

詳細については、React Aria ドキュメントを参照してください。

日付ピッカー

<Calendar> コンポーネントを使用して日付ピッカーを構築できます。詳細については、日付ピッカー ページを参照してください。

国際カレンダー

ペルシャ、イスラム、仏教などの国際暦システムを使用するには、React Aria の I18nProvider を使用してロケールを設定します。

۱۴۰۴ جوزا

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

import * as React from "react"

基本

基本的なカレンダー コンポーネント。カレンダーのスタイルには className="rounded-lg border" を使用しました。

September 2026

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

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

範囲カレンダー

RangeCalendar コンポーネントを使用して範囲選択を有効にします。

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"

月と年のセレクター

月と年のドロップダウンを表示するには、captionLayout="dropdown" を使用します。

September 2026

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

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

プリセット

September 2026

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

import * as React from "react"

日付と時刻のピッカー

September 2026

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

import * as React from "react"

予約済みの日付

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"

カスタムセルサイズ

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"

--cell-size CSS 変数を使用して、カレンダーのセルのサイズをカスタマイズできます。ブレークポイント固有の値を使用して応答性を高めることもできます。

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

または、固定値を使用します。

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

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

ペルシア語/ヒジュラ語/ジャラリ語などの国際カレンダーを有効にする方法については、国際カレンダー ガイドも参照してください。

سبتمبر 2026

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

import * as React from "react"

API リファレンス

Calendar コンポーネントの詳細については、React Aria ドキュメントを参照してください。