カレンダー

カレンダーは、1つ以上の日付グリッド（例：月）を含むグループ化要素と、日付範囲を移動するための前のボタンと次のボタンで構成されています。各カレンダーグリッドは、日付を選択するために押したり、矢印キーで移動したりできるボタン要素を含むセルで構成されています。

インストール

npx nextui-cli@latest add calendar

上記のコマンドは個別インストール専用です。もし @nextui-org/reactがグローバルにインストール済みの場合は、このステップをスキップしてください。

インポート

使い方

Calendar はデフォルトでは選択がありません。defaultValue プロパティを使用すると、Calendar に初期の、非制御の値を指定できます。あるいは、value プロパティを使用すると、制御された値を指定できます。

日付の値は、@internationalized/date パッケージのオブジェクトを使用して提供されます。このライブラリは、カレンダー、タイムゾーン、その他のローカライズに関する問題をまたいで、正しい国際的な日付操作を処理します。

無効化

isDisabled ブール値プロパティは、Calendar を無効にします。セルはフォーカスまたは選択できません。

読み取り専用

isReadOnly ブール値プロパティは、Calendar の値を不変にします。isDisabled とは異なり、Calendar はフォーカス可能なままです。

制御された

Calendar はデフォルトでは選択がありません。defaultValue プロパティを使用すると、Calendar に初期の、非制御の値を指定できます。あるいは、value プロパティを使用すると、制御された値を指定できます。

最小日付値

デフォルトでは、カレンダーは任意の日付を選択できます。minValue を使用して、ユーザーが特定範囲外の日付を選択できないようにすることもできます。

この例では、今日以降の日付のみを受け付けます。

最大日付値

デフォルトでは、カレンダーは任意の日付を選択できます。maxValue を使用して、ユーザーが特定範囲外の日付を選択できないようにすることもできます。

この例では、今日より前の日付のみを受け付けます。

利用不可の日付

カレンダーは特定の日付を利用不可としてマークすることをサポートしています。これらの日付は、ナビゲーションの一貫性を保つためにキーボードでフォーカス可能ですが、ユーザーが選択することはできません。この例では、赤で表示されます。isDateUnavailable プロパティは、表示されている各日付が利用不可かどうかを評価するために呼び出されるコールバックを受け入れます。

制御されたフォーカス値

カレンダーは、そもそもユーザーが無効な日付を選択しないようにしようとします。ただし、アプリケーションロジックに従って選択された日付が無効な場合は、isInvalidプロパティを設定できます。これにより、支援技術のユーザーに選択が無効であることを警告し、スタイリング目的でも使用できます。さらに、errorMessageスロットを使用して、ユーザーが問題を修正するのを支援できます。

デフォルトでは、カレンダーが最初にマウントされたときに、選択された日付にフォーカスが当たります。value または defaultValue プロパティが提供されない場合は、現在の日付にフォーカスが当たります。ただし、カレンダーは focusedValue および onFocusChange プロパティを使用して、どの日付にフォーカスを当てるかを制御できます。これにより、どの月が表示されるかも決定されます。defaultFocusedValue プロパティを使用すると、カレンダーが最初にマウントされたときに、制御せずに初期フォーカス日付を設定できます。

無効な日付

この例では、選択した日付が現在のロケールに従って平日であり、週末ではないことを検証します。

月と年のピッカー付き

カレンダーは、迅速な選択のために月と年のピッカーをサポートしています。

国際カレンダー

カレンダーは、グレゴリオ暦、ヘブライ暦、インド暦、イスラム暦、仏暦など、世界中で使用されている多くのカレンダーシステムでの日付の選択をサポートしています。日付は、ユーザーのロケールに適したカレンダーシステムで自動的に表示されます。カレンダーシステムは、Unicode カレンダーロケール拡張機能を使用してオーバーライドできます。Provider コンポーネントに渡されます。

表示される月

デフォルトでは、カレンダーには1か月が表示されます。visibleMonths プロパティを使用すると、一度に最大3か月を表示できます。

ページ動作

デフォルトでは、[次へ]または[前へ]ボタンを押すと、ページネーションは visibleMonths の値だけ進みます。この動作は、pageBehavior を single に設定することで、代わりに1か月ずつページングするように変更できます。

プリセット

topContent と bottomContent をカスタマイズして、いくつかのプリセット値を持つ例を次に示します。

スロット

• base: カレンダーラッパー。配置、配置、および一般的な外観を処理します。
• prevButton: カレンダーの前のボタン。
• nextButton: カレンダーの次のボタン。
• headerWrapper: ピッカー（月/年）をラップします。
• header: ヘッダー要素。
• title: カレンダータイトルで使用するための、表示されている日付範囲の説明。
• gridWrapper: カレンダーグリッドのラッパー。
• grid: 日付グリッド要素（例： <table>）。
• gridHeader: 日付グリッドヘッダー要素（例： <th>）。
• gridHeaderRow: 日付グリッドヘッダー行要素（例： <tr>）。
• gridHeaderCell: 日付グリッドヘッダーセル要素（例： <td>）。
• gridBody: 日付グリッド本体要素（例： <tbody>）。
• gridBodyRow: 日付グリッド本体行要素（例： <tr>）。
• cell: 日付グリッドセル要素（例： <td>）。
• cellButton: セル内のボタン要素。
• pickerWrapper: ピッカーのラッパー
• pickerMonthList: 月リストピッカー。
• pickerYearList: 年リストピッカー。
• pickerHighlight: ピッカーの強調表示された項目。
• pickerItem: ピッカーの項目。
• helperWrapper: カレンダーのヘルパーメッセージ。
• errorMessage: カレンダーのエラーメッセージ。

データ属性

Calendar には、CalendarCell 要素に次の属性があります。

• data-focused: セルがフォーカスされているかどうか。
• data-hovered: セルに現在マウスがホバーされているかどうか。
• data-pressed: セルが現在押されているかどうか。
• data-unavailable: カレンダーの isDateUnavailable プロパティに従って、セルが利用不可かどうか。利用不可の日付はフォーカス可能ですが、ユーザーが選択することはできません。異なる色や取り消し線など、利用不可であることを示す視覚的な手がかりで表示する必要があります。
• data-disabled: カレンダーの minValue、maxValue、および isDisabled プロパティに従って、セルが無効かどうか。
• data-focus-visible: セルがキーボードでフォーカスされているかどうか。
• data-outside-visible-range: セルがカレンダーの表示範囲外にあるかどうか。
• data-outside-month: セルが現在の月の範囲外にあるかどうか。
• data-selected: セルが選択されているかどうか。
• data-selected-start: セルが範囲選択の最初の日付であるかどうか。
• data-selected-end: セルが範囲選択の最後の日付であるかどうか。
• data-invalid: セルが無効な選択の一部であるかどうか。

アクセシビリティ

• 一度に1つ以上の月、または週ビューのようなユースケース向けのカスタム時間範囲を表示します。最小値と最大値、利用不可の日付、および非連続的な選択もサポートされています。
• グレゴリオ暦、仏暦、イスラム暦、ペルシア暦など、世界中で使用されている13のカレンダーシステムをサポートしています。ロケール固有の書式設定、数字システム、および右から左へのサポートも利用できます。
• カレンダーセルはキーボードを使用してナビゲートおよび選択でき、選択範囲と表示されている日付範囲が変更されたときに通知するローカライズされたスクリーンリーダーメッセージが含まれています。

API

カレンダーのプロパティ

カレンダーイベント

型

対応カレンダー

/**
 * Supported react-aria i18n calendars.
 */
export type SupportedCalendars =
  | "buddhist"
  | "ethiopic"
  | "ethioaa"
  | "coptic"
  | "hebrew"
  | "indian"
  | "islamic-civil"
  | "islamic-tbla"
  | "islamic-umalqura"
  | "japanese"
  | "persian"
  | "roc"
  | "gregory";