angular 7+中fullcalendar 4的调用方法答案

【问题标题】：Calling methods of fullcalendar 4 in angular 7+angular 7+中fullcalendar 4的调用方法
【发布时间】：2019-08-21 10:01:34
【问题描述】：

我使用 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

【问题讨论】：

(rerenderEvents)="setProp($event)" 在那里毫无意义。 rerenderEvents 是一个单独调用的方法。这不是您可以在设置时传递给日历的选项
fullcalendar.io/docs/angular 向您展示了如何正确调用方法（在标题为“访问 fullCalendar 的 API 的部分）”
rerenderEvents 行是我的错字。我试过这个，let calendarApi= this.calendarComp.getApi(); console.log(calendarApi.getDate()); 错误：TypeError: Cannot read property 'getDate' of undefined
它应该可以工作。断章取意，我无法判断该代码是否在正确的情况下正确使用。

标签： angular fullcalendar-4

【解决方案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 issue

【讨论】：