React Calendar (カレンダー) の概要

Ignite UI for React Calendar コンポーネントは、軽量で構成が簡単です。日付と曜日を表示するために使用されます。また、エンドユーザーに月次または年次ビューを提供するための最良の方法でもあります。Ignite UI for React カレンダーコントロールを使用すると、ユーザーがナビゲートできる最小および最大の日付範囲を制限できます。

Ignite UI for Ignite UI for React Calendar は、日付情報を表示するための簡単で直感的な方法を提供します。単一または複数の日付選択モード、日付範囲の強表示と選択、キーボードナビゲーション、週番号の有効化、サイズと間隔のオプションなど、さまざまな機能がパックされています。

React Calendar の例

次の React IgrCalendar コンポーネントの例は、1 日選択モードの基本的なカレンダーを示しています。それがどのように機能するかを確認するか、コードビハインドを調べます。

Ignite UI を使用して React で Calendar を作成する方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、Ignite UI for React IgrCalendar とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrCalendarModule, IgrCalendar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCalendarModule.register();

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

Ignite UI for React IgrCalendar の使用を開始する最も簡単な方法は次のとおりです。

<IgrCalendar />

単一モード

ユーザーは、単一選択、複数選択、または範囲選択の 3 つの異なる選択モードから選択できます。デフォルトでは、Ignite UI for React IgrCalendar は単一選択モードを使用していますが、この例に示すように selection プロパティを設定することで変更できます。

<IgrCalendar selection="multiple" />

範囲選択

同じ方法に従って、selection を範囲モードに切り替えることができます:

<IgrCalendar selection="range" />

Active View と Date

Ignite UI for React Calendar コンポーネントを使用すると、日、月、年の 3 つの異なるビューを切り替えることができます。コンポーネントの activeView プロパティは、現在のビューを反映します。デフォルトでは、Calendar は最初に読み込まれたときに現在の日付を表示します。これは、activeDate プロパティを設定することで変更できます。activeDate プロパティは、エンドユーザーが現在表示している日付の変更も反映します。

週番号

showWeekNumbers プロパティを使用して、Calendar コンポーネントの週番号を表示できます。これを行うには、対応するブール属性 show-week-numbers を次のように使用します:

<IgrCalendar showWeekNumbers={true} />

次のデモは、週番号が有効になっている Calendar を示しています:

複数の月

visibleMonths プロパティを使用すると、Calendar が days ビューのときに 1 か月以上表示できます。複数の月が表示されている場合は、orientation プロパティを使用して、月を垂直方向にスタックするか水平方向にスタックするかを構成できます。デフォルトでは、orientation プロパティは horizontal に設定されています。

Calendar には、前月と翌月の前後の日付が表示されます。これらの日付を非表示にするには、hideOutsideDays プロパティを true に設定するか、対応するブール属性 hideOutsideDays を使用します。

<IgrCalendar visibleMonths={2} hideOutsideDays={true} />

次のサンプルは、複数月の構成を示しています:

サイズ

--ig-size CSS 変数を使用して、カレンダーの内部要素のサイズと間隔を制御できます。コンポーネントのデフォルトのサイズは大きいです。

イベント

選択した日付がエンドユーザーによって変更されると、Calendar コンポーネントは Change イベントを発行します。このようにイベントをサブスクライブできます:

<IgbCalendar change={this.onCalendarChange} />

public onCalendarChange(calendar: IgrCalendar, e: IgrComponentDataValueChangedEventArgs) {

}

キーボードナビゲーション

Tab キーを使用してページを移動する場合、IgrCalendar が W3 アクセシビリティ推奨事項 (英語)に基づいて以下のタブストップを導入することに注意してください。

[月の選択] ボタン
[年の選択] ボタン
[前へ] ボタン
[次へ] ボタン
アクティブな日付要素

IgrCalendar コンポーネントの日/月/年がフォーカスされている場合は、次を使用します:

PageUp キーを押すと、前の月/年のページに移動します。
PageDown キーを押すと、次の月/年のページに移動します。
Home キーを使用して、現在の月の最初の日/最初の月を表示/最初の年を表示します。
End キーを押すと、当月/先月/昨年の最終日にフォーカスされます。
矢印 キーを使用して、日/月/年をナビゲートします。最初の項目の前と最後の項目の後に移動すると、ビューが次/前の月/年のページに切り替わります。

days ビュー内の日がフォーカスされている場合は、次を使用します:

Shift + PageUp キーで前年に移動します。
Shift + PageDown キーを押して翌年に移動します。
Space または Enter キーを押して、現在フォーカスされている日を選択します。

months ビュー内の月がフォーカスされている場合は、次を使用します:

Space または Enter キーを押すと、activeDate が現在フォーカスされている月に変更され、days ビューに切り替わります。

years ビュー内の年がフォーカスされている場合は、次を使用します:

Space または Enter キーを使用して、activeDate を現在フォーカスされている年に変更し、months ビューに切り替えます。

サブヘッダー内の前または次のボタンにフォーカスがある場合は、次を使用します:

Space または Enter キーを押すと、前/翌月/年のページに切り替わります。

サブヘッダー内の月ボタンにフォーカスがある場合は、次を使用します:

Space または Enter キーを押して、months ビューに切り替えます。

サブヘッダー内の年ボタンにフォーカスがある場合は、次を使用します:

Space または Enter キーを押して、years ビューに切り替えます。

スタイル設定

Calendar コンポーネントは、その内部要素のほぼすべての CSS パーツを公開します。次の表に、Calendar によって公開されるすべての CSS パーツを示します:

名前	説明
header	ヘッダー要素。
header-title	ヘッダーのタイトル要素。
header-date	ヘッダーの日付要素。
content	ビューとナビゲーション要素を含むコンテンツ要素。
navigation	ナビゲーションコンテナー要素。
months-navigation	月のナビゲーションボタン要素。
years-navigation	年のナビゲーションボタン要素。
years-range	年の範囲の要素。
navigation-buttons	ナビゲーションボタンコンテナー。
navigation-button	前/次のナビゲーションボタン。
days-view-container	日ビューコンテナー要素。
days-view	日ビュー要素。
months-view	月ビュー要素。
years-view	年ビュー要素。
days-row	日行要素。
label	週ヘッダーラベル要素。
week-number	週番号要素。
week-number-inner	週番号の内部要素。
date	日付要素。
date-inner	日付の内部要素。
first	最初に選択された日付要素。
last	最後に選択された日付要素。
inactive	非アクティブな日付要素。
hidden	非表示の日付要素。
weekend	週末の日付要素。
range	範囲選択の要素。
special	特別な日付要素。
disabled	無効な日付要素。
single	単一選択の日付要素。
preview	範囲選択プレビュー日付要素。
month	月の要素。
month-inner	月の内部要素。
year	年の要素。
year-inner	年の内部要素。
selected	選択された状態を示します。日付、月、年の要素に適用されます。
current	現在の状態を示します。日付、月、年の要素に適用されます。

これらの CSS パーツを使用して、次のように Calendar コンポーネントの外観をカスタマイズできます:

igc-calendar::part(header) {
    background: #345779;
}

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected) {
    background: #345779;
    border-color: #345779;
}

igc-calendar::part(date-inner current),
igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus,
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
    color: #2dabe8;
}

igc-calendar::part(date-inner current selected),
igc-calendar::part(month-inner current selected),
igc-calendar::part(year-inner current selected) {
    box-shadow: inset 0 0 0 0.0625rem white, 0 0 0 0.0625rem #345779;
    color: white;
}

次のサンプルは、上記の CSS 構成を示しています:

API リファレンス

IgrCalendar
IgrRadio
IgrRadioGroup
activeDate
activeView
After
Before
Between
Change
DateRangeDescriptor
DateRangeType
dateRange