在具有全日历4和角度8的init上加载事件

Posted 2021-04-10

我已经将全日历从v3更新到了v4，并且正在使用角度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]中的事件，并且期望使用数组。我可以在组件的初始化上加载数组，但是我不知道如何在日期更改时加载新事件（您单击下周的按钮）。

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

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

此功能每次在日期或视图改变时触发，并且要获得红利，有start和end。如何在V4中使用angular进行类似的通话？我正在浏览文档，但找不到解决方案。

答案

在您的示例中，请保持此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);
       })
  };
}