Angular8和完整日历组件

Question

我正在努力使完整的日历在我的Angular8应用程序中工作。我尝试过几种不同的实现方式，但到目前为止都让我失望了。大多数教程和示例建议使用"jquery方法“，但当我尝试时，我认为它已经过时了，如下所示：

$("#calendar").fullCalendar(
            this.defaultConfigurations
        );

我有一个运行时错误，fullCalendar不是一个函数。

唯一能让日历正常工作的方法是这样的：

export class EventCalendarViewComponent extends BaseClass implements OnInit {

@ViewChild('calendar', null) calendar: FullCalendarComponent;

calendarPlugins = [dayGridPlugin];
calendarEvents = [];
addDialogRef: MatDialogRef<AddEventComponent>;
editDialogRef: MatDialogRef<EditEventComponent>;

constructor(private dialog: MatDialog, protected snackBar: MatSnackBar, private eventService: EventService) {
    super(snackBar);
}

protected getData() {
    this.eventService.getAllEvents().subscribe(res => {
        res.forEach(event => {
            const calendarEvent: CalendarEvent = this.schoolEventToCalendarEvent(event);
            this.calendarEvents.push(calendarEvent);
        });
    });
}

ngOnInit(): void {
    this.getData();
}

private schoolEventToCalendarEvent(event: SchoolEvent): CalendarEvent {
    return {
        id: event.id,
        title: event.title,
        start: moment(event.startDate).format('YYYY-MM-DD'),
        end: moment(event.endDate).format('YYYY-MM-DD')
    }
} ...

然后html看起来是这样的：

<full-calendar #calendar
               defaultView="dayGridMonth"
               [plugins]="calendarPlugins"
               [events]="calendarEvents"
               [editable]="true"
               [allDayDefault]="true"
               [timeZone]="'local'"
></full-calendar>

但是，使用getData()方法填充的事件不会显示在日历上。查看任何事件的唯一方法是其变量的静态填充：

calendarEvents = [{id: 1, title: 'static entry', start: '2019-09-05'}];

这里的诀窍是什么？在db调用完成后，我找不到刷新日历的方法。

Answer 1

诀窍是(至少在我的情况下)像这样声明组件：

<full-calendar #calendar
               defaultView="dayGridMonth"
               deepChangeDetection="true"
               [plugins]="calendarPlugins"
               [events]="calendarEvents"
               [refetchResourcesOnNavigate]="true"
               [editable]="true"
               [allDayDefault]="true"
               [timeZone]="'local'"
></full-calendar>

所以我觉得

deepChangeDetection=“真”

是造成差异的属性。refetchResourcesOnNavigate也在那里，不会改变任何东西。由于我的数据来自数据库，所以另一个属性是：

rerenderDelay

在这里可能很有用，特别是deepChangeDetection可能会影响性能。