IgxCalendarとIgxMonthPickerのviewDateChangedイベント

Ignite UI for Angular 10.1.3バージョン時点での情報に基づいています。

Ignite UI for Angular 10.1.xでIgxCalendarとIgxMonthPickerのビューが切り替わった際の処理を追加することが可能になりました。対応するイベントはviewDateChangedイベントです。渡されてくる引数から、切り替わる前の月の1日の日付と切り替わった後の月の1日の日付が取得できます。

また、IgxCalendarとIgxMonthPickerのviewDateも、月の1日の日付を返すようになりました。

<!-- app.component.html -->

<!-- igx-calendar -->
<igx-calendar #calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>

<!-- igx-month-picker -->
<igx-month-picker #monthPicker (viewDateChanged)="viewDateChanged($event)"></igx-month-picker>

// app.component.ts
public viewDateChanged(event: IViewDateChangeEventArgs) {
  console.log(event.previousValue); // 切り替わる前の月の1日の日付
  console.log(event.currentValue);  // 切り替わった後の月の1日の日付
}

　

APIリファレンス

• 「IgxCalendarComponent」→「viewDateChanged」
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#viewdatechanged
• 「IgxMonthPickerComponent」→「viewDateChanged」
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxmonthpickercomponent.html#viewdatechanged

　

サンプル