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

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

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

React Calendar の例

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarOverview/>);
tsxコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

npm install igniteui-react
cmd

次に、以下のように、Ignite UI for React IgrCalendar と必要な CSS をインポートする必要があります:

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

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

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

<IgrCalendar />
tsx

単一モード

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

<IgrCalendar selection="multiple" />
tsx

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarMultipleSelection extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                    
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar selection="multiple" style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarMultipleSelection/>);
tsxコピー

Edit in: Codesandbox

範囲選択

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

<IgrCalendar selection="range" />
tsx

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarRangeSelection extends React.Component<any, any> {    

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar selection='range' style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarRangeSelection/>);
tsxコピー

Edit in: Codesandbox

Active View と Date

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

週番号

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

<IgrCalendar showWeekNumbers={true} />
tsx

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarWeekNumbers extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                      
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar showWeekNumbers={true} style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarWeekNumbers/>);
tsxコピー

Edit in: Codesandbox

複数の月

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

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

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

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarMultipleMonths extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar visibleMonths={2} hideOutsideDays={true} style={{width: '600px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarMultipleMonths/>);
tsxコピー

Edit in: Codesandbox

サイズ

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCalendar, IgrRadioGroup, IgrRadio } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarSize extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                
        this.onRadioChange = this.onRadioChange.bind(this);
        this.state = { calendarSize: "large"};        
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrRadioGroup alignment="horizontal" style={{ marginBottom: '10px' }}>
                    <IgrRadio name="size" value="small" 
                        checked={this.state.calendarSize === "small"} 
                        onChange={this.onRadioChange}>
                        <span>Small</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="medium" 
                        checked={this.state.calendarSize === "medium"} 
                        onChange={this.onRadioChange}>
                        <span>Medium</span>
                    </IgrRadio>
                    <IgrRadio name="size" value="large" 
                        checked={this.state.calendarSize === "large"} 
                        onChange={this.onRadioChange}>
                        <span>Large</span>
                    </IgrRadio>
                </IgrRadioGroup>
                <IgrCalendar className={'size-' + this.state.calendarSize} style={{width: '400px'}}/>                
            </div>
        );
    }

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

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarSize />);
tsxコピー

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

Edit in: Codesandbox

イベント

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

<IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}
tsx

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

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 ビューに切り替えます。

スタイル設定

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

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CalendarStyling.css';
import { IgrCalendar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default class CalendarStyling extends React.Component<any, any> {

    constructor(props: any) {
        super(props);                    
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrCalendar style={{width: '400px'}}/>                
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CalendarStyling/>);
tsxコピー

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: #446418;
    border-color: #446418;
}

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

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: #7d9b5d;
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
    color: #446418;
}
cssコピー

Edit in: Codesandbox

API リファレンス

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

その他のリソース

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