Web Components Calendar (カレンダー) の概要

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

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

    Web Components Calendar の例

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

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

    まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

    npm install igniteui-webcomponents
cmd
    import { defineComponents, IgcCalendarComponent } from 'igniteui-webcomponents';

defineComponents(IgcCalendarComponent);
ts

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

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

    <igc-calendar></igc-calendar>
html

    単一モード

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

    <igc-calendar selection="multiple"></igc-calendar>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    範囲選択

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

    <!-- Range selection mode -->
<igc-calendar selection="range"></igc-calendar>
html

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Active View と Date

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

    ヘッダー オプション

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

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

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

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

    <igc-calendar selection="range" header-orientation="vertical">
    <span slot="title">Trip dates</span>
</igc-calendar>
html

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

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

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

    <igc-radio-group alignment="horizontal">
    <igc-radio name="locale" value="en" checked>EN</igc-radio>
    <igc-radio name="locale" value="de">DE</igc-radio>
    <igc-radio name="locale" value="fr">FR</igc-radio>
    <igc-radio name="locale" value="ar">AR</igc-radio>
    <igc-radio name="locale" value="ja">JA</igc-radio>
</igc-radio-group>

<igc-calendar
    id="calendar1"
    week-start="monday"
>
</igc-calendar>
html
    this.calendar = document.getElementById('calendar1') as IgcCalendarComponent;
this.calendar.formatOptions = {
    month: 'short',
    weekday: 'short'
};

this.radios = document.querySelectorAll('igc-radio') as NodeListOf<IgcRadioComponent>;
this.radios.forEach(radio => {
    radio.addEventListener('igcChange', () => {
        if (radio.checked) {
            this.calendar.locale = radio.value;
        }
    });
})
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    日付の無効化

    場合によっては、エンド ユーザーが選択できない 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 }];
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    特定の日付

    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 }];
ts

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    週番号

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

    <igc-calendar show-week-numbers></igc-calendar>
html

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    複数の月

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

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

    <igc-calendar visible-months="2" hide-outside-days></igc-calendar>
html

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    サイズ

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    イベント

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

    this.calendar.addEventListener('igcChange', ev => console.log(ev.detail));
ts
    Ignite UI for Web Components | CTA Banner

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

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

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

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

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

    スタイル設定

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

    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
    TS
    HTML
    CalendarStyling.css
    index.css
    Edit in:

    API リファレンス

    その他のリソース