Angular 8 和完整日历组件

Question

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

$("#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 可能会影响性能。

Angular 8 和完整日历组件

Angular8 and Full Calendar component

javascript

fullcalendar

angular

fullcalendar-4

angular8