angular7+中fullcalendar 4的调用方法

Question

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

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

CalendarComponent.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>

Also check this github issue

angular7+中fullcalendar 4的调用方法

Calling methods of fullcalendar 4 in angular 7+

angular

fullcalendar-4