IgxCalendar 初期表示時に複数日を選択状態にする方法

IgxCalendarのselectionプロパティを”multi”に設定し、selectDateメソッドを使用して日付を選択してください。selectDateメソッドにDateオブジェクトの配列を渡すと複数選択ができます。

<igx-calendar
  #calendar1
  selection="multi">
</igx-calendar>

export class AppComponent implements OnInit {
  @ViewChild("calendar1", { read: IgxCalendarComponent, static: true}) public calendar1: IgxCalendarComponent;
  
  // ... (中略) ...

  ngOnInit(): void {
    this.calendar1.selectDate([ new Date(2020, 11, 1), new Date(2020, 11, 5)]);
  }
}

　

実行結果

　

サンプル

　

リファレンス

• IgxCalendarの複数選択
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/calendar#%E8%A4%87%E6%95%B0%E9%81%B8%E6%8A%9E
• selection
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#selection
• selectDate
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxcalendarcomponent.html#selectdate