角度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 也在那里不改变任何东西。由于我的数据来自数据库的另一个属性：

重新渲染延迟

在这里可能很有用，尤其是深度更改检测可能会影响性能。