Angular8 和全日歷組件

Question

我正在嘗試使完整的日歷在我的 Angular8 應用程序中工作。 我嘗試了幾種不同的實現方式，但到目前為止都讓我失望。 大多數教程和示例建議使用“jquery 方法”，但我認為它已經過時了，當我嘗試它時，是這樣的：

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

我有一個運行時錯誤，即 fullCalendar 不是 function。

我可以使日歷工作的唯一方法是這種方法：

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() 方法填充的事件不會顯示在日歷上。 查看任何事件的唯一方法是 static 填充其變量：

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 也在那里，不要改變任何東西。 由於我的數據來自數據庫的另一個屬性：

重新渲染延遲

在這里可能很有用，尤其是 deepChangeDetection 可能會影響性能。