如何在Angular中使用FullCalender设置和更改日历上日期的颜色

Question

我正在尝试使用FullCalender在Angular中的日历上设置开始日期和结束日期。目前，我有一个具有开始日期和结束日期的对象。我想从开始日期到结束日期添加颜色。 https://stackblitz.com/edit/fullcalendar-angular-demo

我尝试使用有效范围，但是可以遍历对象吗？

在HTML中：

<div class='app-calendar' *ngFor="let item of calendarscheduledEvents">

  <full-calendar
  #calendar
  defaultView="dayGridMonth"
  [header]="{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  }"
[validRange] = "{
        start: item.start,
        end: item.end
      }"
  [plugins]="calendarPlugins"
  [weekends]="calendarWeekends"
  [events]="calendarEvents"
  (dateClick)="openModal(template,$event)"
></full-calendar>
</div>

打字稿：

@ViewChild('calendar') calendarComponent: FullCalendarComponent; // the #calendar in the template

calendarVisible = true;
calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin,listPlugin];
calendarWeekends = true;
calendarEvents: EventInput[] = [];
toggleVisible() {
    this.calendarVisible = !this.calendarVisible;
}
toggleWeekends() {
    this.calendarWeekends = !this.calendarWeekends;
}

gotoPast() {
    let calendarApi = this.calendarComponent.getApi();
    calendarApi.gotoDate('2000-01-01'); // call a method on the Calendar object
}
openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template,{
        class: 'modal-dialog-centered'
    });
}