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 問題