angular - 使用 fullcalendar 4 和 angular 8 在 init 上加载事件

Question

我已将完整日历从 v3 更新到 v4，并且我将它与 angular 8 一起使用。问题是如何在init和上加载事件date change。

我试过这个设置：

<full-calendar
        #calendar
        [defaultView]="'timeGridWeek'"
        [plugins]="calendarPlugins"
        [header]="calendarHeader"
        [allDaySlot]="false"
        [slotEventOverlap]="true"
        [editable]="true"
        [selectable]="true"
        [slotLabelFormat]="'HH:mm'"
        [timeZone]="'local'"
        [nowIndicator]="true"
        [aspectRatio]="1"
        [eventTimeFormat]="'HH:mm'"
        [height]="'parent'"
        [firstDay]="1"
        [buttonText]="buttonText"
        [minTime]="'06:00'"
        [maxTime]="'23:00'"
        [views]="views"
        [events]="calendarEvents"
        [weekends]="false"
></full-calendar>

组件获取事件[events]并需要数组。我可以在组件的 init 上加载数组，但我不知道如何在日期更改时加载新事件（您单击下周的按钮）。

在 fullcalendar V3 中，我加载了这样的事件：

settings = {
...
   events: function(start, end, timezone, callback) {
     this.callBaclend(start, end)
     .subscribe(resultData=>{
        callback(resultData);
     })
   }
...
}

每次更改日期或视图时都会触发此功能，并且有start和end。如何在 V4 中使用 Angular 进行类似调用？我正在查看文档，但找不到解决方案。

Answer 1

在您的示例中，保持此 html 相同：

<full-calendar
        #calendar
        [defaultView]="'timeGridWeek'"
        [plugins]="calendarPlugins"
        [header]="calendarHeader"
        [allDaySlot]="false"
        [slotEventOverlap]="true"
        [editable]="true"
        [selectable]="true"
        [slotLabelFormat]="'HH:mm'"
        [timeZone]="'local'"
        [nowIndicator]="true"
        [aspectRatio]="1"
        [eventTimeFormat]="'HH:mm'"
        [height]="'parent'"
        [firstDay]="1"
        [buttonText]="buttonText"
        [minTime]="'06:00'"
        [maxTime]="'23:00'"
        [views]="views"
        [events]="calendarEvents"
        [weekends]="false"
></full-calendar>

然后在您相应的 .ts 文件中，定义calendarEvents为一个函数：

export class SomeComponent implements OnInit {

  ...

  constructor() {}

  ...

  calendarEvents = (dates, callback) => {
    console.log('Fetch events for dates:', dates.start, dates.end);

    this.callBackend(dates.start, dates.end)
       .subscribe(resultData => {
         callback(resultData);
       })
  };
}