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 { IgrCalendar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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 プロパティは、エンド ユーザーが現在表示している日付の変更も反映します。

ヘッダー オプション

デフォルトでは、Ignite UI for React Calendar コンポーネントは、選択された日付に関する情報を含むヘッダー領域を描画します。HasHeader プロパティを false に設定することで、ヘッダーを非表示にできます。headerOrientation プロパティを使用して、ヘッダーの vertical または horizontal を構成することもできます。

[!Note] selection が複数に設定されている場合、Ignite UI for React Calendar ヘッダーが描画されないことに注意してください。

[!Note] Ignite UI for React Calendar の DOM プロパティは camelCase の命名を使用し、対応する HTML 属性は kebab-case を使用していることに注意してください。たとえば、headerOrientation プロパティは header-orientation 属性に対応します。

Ignite UI for React Calendar コンポーネントは、ヘッダーのタイトルをカスタマイズできる title スロットを公開します。

<IgrCalendar selection="range" headerOrientation="vertical">
    <span slot="title">Trip dates</span>
</IgrCalendar>

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

ローカライズおよび書式設定

カレンダーにおいてローカライズおよび書式設定はとても重要な要素です。Ignite UI for React IgrCalendar では、これらは locale、formatOptions、weekStart のプロパティを介して制御およびカスタマイズされます。

先に進んで、他のカスタマイズと一緒にそれらを試してみましょう。最初に設定する必要があるのは、週の開始日を制御する weekStart です。デフォルトは Sunday なので、Monday に設定します。また、Calendar ビューで月と平日を書式設定するために使用されるオプションを指定する formatOptions プロパティをカスタマイズします。最後に、ユーザーの場所の選択に基づいて、locale プロパティを値に設定します:

<IgrRadioGroup alignment="horizontal" value={this.state.calendarLocale}>
    <IgrRadio name="lang" value="en" checked={true} onChange={this.onRadioChange}>
        <span>EN</span>
    </IgrRadio>
    <IgrRadio name="lang" value="de" onChange={this.onRadioChange}>
        <span>DE</span>
    </IgrRadio>
    <IgrRadio name="lang" value="fr" onChange={this.onRadioChange}>
        <span>FR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ar" onChange={this.onRadioChange}>
        <span>AR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ja" onChange={this.onRadioChange}>
        <span>JA</span>
    </IgrRadio>                    
</IgrRadioGroup>

<IgrCalendar weekStart='monday' formatOptions={this.state.calendarFormat} 
    locale={this.state.calendarLocale}
    value={new Date()}/>

constructor(props: any) {
    super(props);
    this.onRadioChange = this.onRadioChange.bind(this);
    const formatOptions: IgrCalendarFormatOptions = {
        month: 'short',
        weekday: 'short',
    }
    this.state = { calendarLocale: "en", calendarFormat: formatOptions };
}

public onRadioChange(e: any) {
    if (e.detail.checked) {
        this.setState({ calendarLocale: e.detail.value });
    }
}

すべて適切に設定できると、カスタマイズされた表示の Calendar ができあがります。これにより、ユーザーの選択に基づいてロケールの表現も変更されます。以下は結果です:

日付の無効化

場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、disabledDates プロパティを使用して実現されます。disabledDates プロパティは、DateRangeDescriptor オブジェクトの配列です。各記述子には Type があり、オプションで Date オブジェクトの配列である dateRange があります。

Type プロパティで使用できるオプションは次のとおりです:

• After - dateRange の最初の日付以降の日付を無効にします。
• Before - dateRange の最初の日付より前の日付を無効にします。
• Between - dateRange の最初の日付と 2 番目の日付の間の日付を無効にします。
• Specific - dateRange 配列で指定された日付を無効にします。
• Weekdays - すべての平日を無効にします。
• Weekends - すべての週末を無効にします。

現在の月の 3 日から 8 日の日付を無効にするサンプルを作成します。

const today = new Date(Date.now());
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: range }];

<IgrCalendar disabledDates={this.state.disabledDates}/>

const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Specific,
}
const disabledDates = [desc];
this.state = { disabledDates };

これらの構成では、次の結果が得られます:

特定の日付

specialDates プロパティは、disabledDates とほぼ同じ構成原則を使用しています。特別な日付はハイライト表示されたルック アンド フィールを持ち、無効な日付とは異なり、選択することができます。

Calendar に特別な日付を追加しましょう。これを行うために、DateRangeDescriptor を作成し、現在の月の 3 日から 8 日までの日付を渡します。

const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.specialDates = [{ type: DateRangeType.Between, dateRange: range }];

<IgrCalendar specialDates={this.state.specialDates}/>

const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
]
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Between,
}
const specialDates = [desc]
this.state = { specialDates };

次のデモは、休暇申請オプション付きの Calendar を示しています。

週番号

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 イベントを発行します。このようにイベントをサブスクライブできます:

<IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}

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

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

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

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

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

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

• SHIFT + PAGE UP キーで前年に移動します。
• SHIFT + PAGE DOWN キーを押して翌年に移動します。
• SPACE または ENTER キーを押して、現在フォーカスされている日を選択します。

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

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

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

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

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

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

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

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

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

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

スタイル設定

IgrCalendar コンポーネントは、その内部要素のほぼすべての CSS パーツを公開します。次の表に、公開されているすべての 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 パーツを使用して、次のように IgrCalendar コンポーネントの外観をカスタマイズできます:

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
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: var(--ig-primary-300);
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
  color: var(--ig-primary-800);
}

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

API リファレンス

• IgrCalendar
• IgrRadio
• IgrRadioGroup
• activeDate
• activeView
• DateRangeDescriptor
• dateRange
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)