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

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

    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 リファレンス

    その他のリソース