angular 7+中fullcalendar 4的调用方法

Question

我使用 Fullcalendar Angular 文档创建了一个日历组件。 当我尝试调用 addEvent、Rerender、refetch 等方法时，它给了我这个错误： this.calendarComp.render is not a function

尝试导入 FullCalendar/angular 的 FullCalendarComponent，但这甚至不包含 fullcalendar.component.d.ts 中的 rerenderEvents、addevents 等功能，当前代码如下：

日历组件.ts

@ViewChild('calendar', { static: true }) calendarComp: Calendar; // the #calendar in the template
  ngOnInit() {
    // OPTIONS IN CALENDAR

    console.log(this.calendarComp)
    this.options = {
      businessHours: {
        daysOfWeek: [1, 2, 3, 4, 5],
        startTime: '00:00',
        endTime: '24:00',
      },
      editable: true,
      customButtons: { 
        test:{
          text:"click for Now",
          click: function(){
            this.calendarComp.getNow();  //Example function present in Main.d.ts of Fullcalendar/core
          }
        }
      },
      header: {
        left: 'prev,next',
        center: 'title test',
        right: 'dayGridMonth,listView,timeGridWeek,timeGridDay'
      },
      plugins: [dayGridPlugin, interactionPlugin, listPlugin, bootstrapPlugin, timeGrigPlugin],
      events: [
        {
          title: 'test', startRecur: new Date('2019-08-01'), allDay: false, startTime: '14:00:00', duration: '08:00', daysOfWeek: [1, 2, 3, 4, 5],
        constraint: 'businessHours', endRecur: new Date('2019-09-07'),
        overlap: true
        }
      ]
    };

html：

<full-calendar

  #calendar
  id="calendar"
  themeSystem="bootstrap"
  [businessHours]="options.businessHours"
  [editable]="true"
  [events]="options.events"
  [header]="options.header"
  [customButtons]="options.customButtons"
  [plugins]="options.plugins"
  (eventClick)="eventClick($event)"
  (addEventSource)="addEventSource($event)"
  (setProp)="setProp($event)"
  (rerenderEvents)="setProp($event)"
></full-calendar>

我在添加动态事件时尝试调用 rerenderEvents，但我无法访问此方法本身。

this.calendarComp.rerenderEvents is not a function

Answer 1

我知道答案迟到了，但它也可能对其他人有所帮助。 对于 Angular 8 和完整日历版本 4，请按照此语法解决与此相关的所有问题 getApi() 未定义，如 OP 注释中所述

 //In typescript declare @ViewChild('calendar', { static: true }) calendar: FullCalendarComponent; ngOnInit() { //For render issues in ionic/angular applications setTimeout(function () { window.dispatchEvent(new Event('resize')) }, 1) } myFunc(){ let calendarApi = this.calendar.getApi(); calendarApi.render(); }

 <full-calendar #calendar [defaultView]="defaultView" schedulerLicenseKey='GPL-My-Project-Is-Open-Source' [plugins]="calendarPlugins" [header]="header" [duration]="duration" [slotDuration]="slotDuration" [aspectRatio]="aspectRatio" [views]="views" [editable]="editable" [resourceLabelText]="resourceLabelText" [resources]="resources" [events]="events" [eventStartEditable]="eventStartEditable" [eventDurationEditable]="eventDurationEditable" [dragRevertDuration]="dragRevertDuration" [customButtons]="customButtons" [resourceAreaWidth]="resourceAreaWidth" [slotLabelFormat]= "slotLabelFormat" deepChangeDetection="true" resourceGroupField= "building" (eventClick)="eventClick($event)" (dateClick)="dateClick($event)" ></full-calendar>

还要检查这个github 问题