カレンダーCalendar
Experimental

日付の入力・編集ができるカレンダーコンポーネントです。

状態とバリエーション

複数選択

締切日や実施日など、連続しない複数の日付を同じ月内で選択します。

2026年5月

範囲選択

開始日と終了日を同じカレンダーで選択します。レポートの絞り込みや予約フローに使います。

2026年6月

2026年7月

過去日を無効化

予約フローなどで、すでに過ぎた日付を選択できないようにします。

2026年6月

プロパティ

表は横にスクロールできます

プロパティ	型	初期値	説明
mode	'single' \| 'multiple' \| 'range' \| 'default'	-	日付の選択モード。
selected	Date \| Date[] \| DateRange \| undefined	-	選択中の日付、日付配列、または範囲。
onSelect	(date: any) => void	-	日付を選択した時に呼ばれる処理です。
showOutsideDays	boolean	true	前後月の日付を表示するか。
captionLayout	'label' \| 'dropdown' \| 'dropdown-months' \| 'dropdown-years'	'dropdown'	月・年の表示方法です。初期状態では月と年を選択できるメニューを表示します。
startMonth	Date	current year - 10	月・年移動で選べる最初の月。
endMonth	Date	current year + 10	月・年移動で選べる最後の月。
fixedWeeks	boolean	true	月ごとの行数差で高さが変わらないよう、常に6週分の高さで表示します。
locale	Locale	ja	月名・曜日名の言語設定です。初期値は日本語です。
holidays	CalendarHoliday[]	japaneseHolidays	祝日として扱う日付リスト。外部ファイルの祝日データに差し替え可能。
showHolidays	boolean	true	祝日の色分けを表示するかを指定します。
showWeekendStyle	boolean	true	土曜・日曜の色分けを表示するかを指定します。
disabledReason	ReactNode	-	無効な日付に共通して表示する理由です。hover、focus、touch で Tooltip として表示します。
getDisabledReason	(date, modifiers) => ReactNode	-	日付や modifier に応じて無効理由を出し分ける関数です。disabledReason より優先されます。
disabledReasonLabel	string \| (date, modifiers) => string	-	無効理由 Tooltip のトリガーに付与する支援技術向けラベルです。
disabledReasonPortalContainer	HTMLElement \| null	-	docs プレビューや擬似ブラウザ内に Tooltip を閉じ込めたい場合のポータル先です。
className	string	-	ルート要素に追加するスタイル用クラスです。

使い方

Loading...

使用コンポーネント

DatePicker DateRangePicker Popover Form