javascript - Angular 8 和完整日历组件

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'}];

这里有什么技巧？我找不到在数据库调用完成后刷新日历的方法。

Answer 1

技巧是(至少在我的例子中)像这样声明组件:

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

所以我认为

deepChangeDetection="true"

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

rerenderDelay

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