Angular Calendar

    Ignite UI for Angular Calendar コンポーネントは、ネイティブ Angular コンポーネントであり、日付情報を簡単に表示できます。ユーザーは、単一選択、複数選択、または範囲選択の 3 つの選択モードから選択できます。

    Angular Calendar の例

    使用方法

    はじめに

    Calendar コンポーネントを初期化する前に、IgxCalendarModuleapp.module.ts ファイルにインポートします。

    注: タッチ操作のために、IgxCalendarBrowserAnimationsModuleHammerModule に依存関係があり、これらも AppModule に追加する必要があります。

    // app.module.ts
    ...
    import { HammerModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { IgxCalendarModule } from 'igniteui-angular';
    @NgModule({
        ...
        imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
        ...
    })
    export class AppModule {}
    
    Warning

    IgxCalendarComponent が日付のローカライズおよび書式設定のために Intl Web API を使用します。 対象プラットフォームがその API をサポートしない場合、適切なポリフィルを使用してください。

    単一選択のカレンダー

    IgxCalendarComponent をインスタンス化するには、セレクター要素をテンプレートに追加します。単一選択カレンダー モードで現在の月を表示します。

    <!-- app.component.html -->
    <!-- Single selection mode -->
    <igx-calendar></igx-calendar>
    

    複数選択

    selection プロパティを使用してデフォルトのモードを簡単に変更できます。

    <!-- app.component.html -->
    <!-- Multi selection mode -->
    <igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>
    

    範囲選択

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

    <!-- app.component.html -->
    <!-- Range selection mode -->
    <igx-calendar selection="range"></igx-calendar>
    

    Note

    選択が multi または range の場合、カレンダー ヘッダーは描画されません。

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

    カレンダーにおいてローカライズおよび書式設定はとても重要な要素です。IgxCalendarComponent でこれらは以下のプロパティによって制御およびカスタマイズします - localeformatOptionsformatViewsweekStart

    これらの設定に加え、IgxCalendarComponent API のその他のカスタマイズ機能も使用できます。最初に週の開始日を制御する weekStart を設定します。デフォルト値が 0 (日曜日) であるため、値を 1 (月曜日) に設定します。以下のマークアップで表示書式設定をカスタマイズするために、formatOptions および formatViews プロパティもバインドしています。最後に、locale プロパティをユーザーの選択した場所に基づいて値にバインドします。

    <!-- app.component.html -->
    <igx-select #select [(ngModel)]="locale">
        <igx-select-item *ngFor="let locale of locales" [value]="locale">
            {{ locale }}
        </igx-select-item>
    </igx-select>
    
    <igx-calendar #calendar
        [weekStart]="1"
        [locale]="locale"
        [formatOptions]="formatOptions"
        [formatViews]="formatViews">
    </igx-calendar>
    

    すべてのプロパティ値が AppComponent ファイルに設定されます。

    // app.component.ts
    @ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent;
    
    public formatOptions: any;
    public formatViews: any;
    public locales = ['EN', 'DE', 'FR', 'AR', 'ZH'];
    public locale = 'EN';
    
    public ngOnInit() {
        this.formatOptions = { day: '2-digit', month: 'long', weekday: 'long', year: 'numeric' };
        this.formatViews = { day: true, month: true, year: true };
    }
    

    すべて適切に設定できると、カスタマイズされた日付を持つカレンダーが表示され、ユーザーの場所に基づいてロケール表現が変更されます。以下は結果です。

    日付の無効化

    このセクションは、disabledDates 機能の使用について説明します。これには、異なる単一の日付または範囲を配列に追加し、disabledDates 記述子に渡すことができます。

    DateRangeType は無効にする範囲を指定するために使用します。

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

    export class CalendarSample6Component {
        @ViewChild('calendar') public calendar: IgxCalendarComponent;
        public today = new Date(Date.now());
        public range = [
            new Date(this.today.getFullYear(), this.today.getMonth(), 3),
            new Date(this.today.getFullYear(), this.today.getMonth(), 8)
        ];
    
        public ngOnInit() {
            this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: this.range }];
        }
    }
    

    これらの構成の結果は以下のようになります。

    特別な日付

    specialDates 機能は、disabledDates とほとんど同じ構成を使用します。disabled と異なる点は specialDates を選択してフォーカスする機能です。

    igxCalendarspecialDates を追加します。これを行うには、DateRangeType.Specific タイプの DateRangeDescriptor 項目を作成し、日付の配列を dateRange として渡します。

    export class CalendarSample7Component {
        @ViewChild('calendar', { static: true })
        public calendar: IgxCalendarComponent;
        @ViewChild('alert', { static: true })
        public dialog: IgxDialogComponent;
        public range = [];
    
        public selectPTOdays(dates: Date[]) {
            this.range = dates;
        }
    
        public submitPTOdays(eventArgs) {
            this.calendar.specialDates =
                [{ type: DateRangeType.Specific, dateRange: this.range }];
    
            this.range.forEach((item) => {
                this.calendar.selectDate(item);
            });
    
            ...
        }
    }
    
    <igx-calendar #calendar weekStart="1"
        selection="multi" 
        (selected)="selectPTOdays($event)">
    </igx-calendar>
    <igx-dialog #alert title="Request Time Off" 
        leftButtonLabel="OK" 
        (leftButtonSelect)="alert.close()">
    </igx-dialog>
    <button igxButton="raised" (click)="submitPTOdays($event)">Submit Request</button>
    

    以下のデモでは、休暇要求オプションのカレンダーを示します。

    週番号

    showWeekNumbers 入力を使用して、Calendar コンポーネント と DatePicker コンポーネントの両方の週番号を表示できるようになりました。

    
    <!-- app.component.html -->
    <igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>
    

    以下のデモは、週番号が有効になっているカレンダーを示しています:

    カレンダー イベント

    カレンダーが発するイベントを見てみましょう:

    • selected - カレンダーで日付を選択すると発生されます。
    • viewDateChanged - 表示されている月/年が変更されるたびに発行されます。たとえば、next または previous の月に移動した後。
    • activeViewChanged - アクティブなビューが変更された後に発生します。たとえば、ユーザーがヘッダーの month または year セクションをクリックした後。
    <!-- app.component.html -->
    <igx-calendar #calendar
        (selected)="onSelection($event)"
        (viewDateChanged)="viewDateChanged($event)"
        (activeViewChanged)="activeViewChanged($event)">
    </igx-calendar>
    

    selectedイベントは、入力検証ロジックを構築するのに適しています。以下のコードを使用して、選択が 5 日を超えた場合にユーザーに警告し、選択をリセットします。

    // app.component.ts
    ...
    public onSelection(dates: Date[]) {
        if (dates.length > 5) {
            this.calendar.selectedDates = [];
            // alert the user
        }
    }
    public viewDateChanged(event: IViewDateChangeEventArgs) {
        // use event.previousValue to get previous month/year that was presented.
        // use event.currentValue to get current month/year that is presented.
    }
    
    public activeViewChanged(event: CalendarView) {
        // use CalendarView[event] to get the current active view (DEFAULT, YEAR or DECADE)
    }
    

    以下のデモを試して (選択を変更し、月と年を移動し)、リアルタイムで記録されたイベントを確認してください:

    ビュー

    IgxCalendarModule によって提供される個別のビューがあり、別々に使用できます。

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

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

    • [前月] ボタン
    • [月の選択] ボタン
    • [年の選択] ボタン
    • [翌月] ボタン
    • 日ビューの選択した日付、現在の日付、最初のフォーカス可能な (無効ではない) 日付

    選択した複数の日付を含むカレンダーでは、最初の日付のみがタブ位置として表示されます。たとえば、複数選択カレンダーで日付を選択した場合: タブ ナビゲーションのときに 13/10/202017/10/2020 および 21/10/2020 のみアクセスできます。範囲を選択したカレンダーでは、選択した範囲の最初の日付のみがページ タブ シーケンスの一部になります。

    Note

    V10.2.0 からの動作変更- 日ビューの Tab キー ナビゲーションは使用できなくなりました。日付ビューの日付間を移動するには、矢印キーを使用します。

    igxCalendar コンポーネントにフォーカスがある場合、以下を使用してナビゲーションできます。

    • PageUp キーは前の月に移動します。
    • PageDown キーは次の月に移動します。
    • Shift + PageUp キーは前の年に移動します。
    • Shift + PageDown> キーは次の年に移動します。
    • Home キーは現在の年の最初の月をフォーカスします。
    • End キーは現在の月の最後の日または最後の月をフォーカスします。

    またはの月のボタン(サブヘッダー内)にフォーカスがある場合、以下を使用します。

    • Space または Enter キーは次の月または前の月のビューへスクロールします。

    サブヘッダーのボタンのフォーカス時:

    • Space または Enter キーは月ビューを開きます。

    サブヘッダーのボタンのフォーカス時:

    • Space または Enter キーは10 年ビューを開きます。

    現在月のがフォーカスされる場合:

    • 矢印キーで日を移動します。注: 無効な日付はスキップされます。
    • フォーカスはビューの現在の月に保持され、ナビゲーションは月の最終日 / 初日 から / までになります。
    • キーボード ナビゲーションは連続です。つまり、矢印でナビゲーションしている間、すべての月を移動します。
    • Enter キー を使用して、現在フォーカスされている日を選択します。

    月ビュー内ののフォーカス時:

    • 矢印キーで月を移動します。
    • Home キーは月ビューの最初の月にフォーカスします。
    • End キーは月ビューの最後の月にフォーカスします。
    • Enter キーは、現在フォーカスされている月を選択してビューと閉じます。

    10 年ビュー内ののフォーカス時:

    • 上矢印キーと下矢印キーで年を移動します。
    • Enter キーは、現在フォーカスされている年を選択してビューと閉じます。
    Note

    バージョン 8.2.0 に続いて、キーボード ナビゲーションは現在の月以外の日をフォーカスせず、ビューの月を変更します。

    マルチビュー カレンダー

    マルチ ビューカレンダーは、3 種類すべての選択をサポートしています。monthsViewNumber 入力を使用して、表示される月の数を設定します。これは、フレックス コンテナーに水平に表示されます。設定される最大値に制限はありません。マルチ ビューカレンダーを使用する場合、現在の月に属さない日を非表示にできます。非表示にするには、hideOutsideDaysプ ロパティを使用します。キーボード ナビゲーションは、表示されている次/前の月へ移動します。

    スタイル設定

    カレンダーのスタイル設定を開始するには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

    @use "igniteui-angular/theming" as *;
    
    // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    

    最も簡単な方法は、igx-calendar-theme を拡張する新しいテーマを作成し、デフォルト テーマのいくつかのパラメーターを受け取る方法です。

    $custom-calendar-theme: igx-calendar-theme(
      $header-background: #345779,
      $content-background: #fdfdfd,
      $header-text-color: #ffffff,
      $date-current-text-color: #2dabe8,
      $picker-arrow-color: #2dabe8,
      $date-selected-text-color: #fdfdfd,
      $date-current-bg-color: #fdfdfd,
      $picker-arrow-hover-color:  #345779,
      $year-current-text-color: #2dabe8,
      $year-hover-text-color: #2dabe8,
      $month-current-text-color: #2dabe8,
      $month-hover-text-color: #2dabe8,
      $picker-text-color: #2dabe8,
      $picker-text-hover-color:  #345779
    );
    

    CSS 変数の使用

    最後に Calendar のカスタム テーマを設定します。

     @include igx-css-vars($custom-calendar-theme);
    

    テーマ オーバーライドの使用

    Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

    :host {
     ::ng-deep {
       @include igx-calendar($custom-calendar-theme);
     }
    }
    

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。