如何解決 fullCalendar is not a function TypeError 錯誤？

Question

我正在使用 FullCalendar 在我的應用程序中實例化一個日歷，即使我可以在我的網頁上看到日歷，我也無法執行 fullCalendar() function。 It gives me a TypeError saying jquery.js:4050 jQuery.Deferred exception: calendarEl.fullCalendar is not a function TypeError: calendarEl.fullCalendar is not a function

這是代碼：

'use strict';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid';
import 'fullcalendar';

export default class CalendarDisplay {
  constructor() {
    this.name = 'CalendarDisplay';
    console.log('CalendarDisplay');

    var calendarEl = document.getElementById('calendar');

    let calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin,timeGridPlugin],
      initialView: "timeGridWeek",
      headerToolbar : {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      allDaySlot: false,
      slotEventOverlap: false,
      scrollTime: '08:00:00',

      events: [
        {
          title: 'All Day Event',
          start: '2021-05-24',
        },
        {
          title: 'Long Event',
          start: '2021-05-24T09:00:00',
          end: '2021-05-24T24:00:00'
        }
      ]
    
    });

    calendar.render();

    calendarEl.fullCalendar({
      viewRender: function(view, element) {
          console.log("The view's title is " + view.intervalStart.format());
          console.log("The view's title is " + view.name);
      }
  });


    
  }
}

Answer 1

您似乎在現代 fullCalendar 和基於 jQuery 的舊版本的語法之間混淆了。 .fullCalendar()是在 v3 及更低版本中運行方法的方式。 使用 v5，如果你想調用一個方法，你可以直接調用。

但我認為無論如何渲染日歷后你都不需要這個單獨的調用。 您似乎正在嘗試設置視圖更改時會發生什么。 這可以在您的初始選項中設置，無需單獨調用。

另一個問題是viewRender在 v5 中不再存在。 它已被標准化的視圖渲染鈎子取代。

所以實際上你可以通過這種方式實現你的目標：

'use strict';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid';
import 'fullcalendar';

export default class CalendarDisplay {
  constructor() {
    this.name = 'CalendarDisplay';
    console.log('CalendarDisplay');

    var calendarEl = document.getElementById('calendar');

    let calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin,timeGridPlugin],
      initialView: "timeGridWeek",
      headerToolbar : {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      allDaySlot: false,
      slotEventOverlap: false,
      scrollTime: '08:00:00',

      events: [
        {
          title: 'All Day Event',
          start: '2021-05-24',
        },
        {
          title: 'Long Event',
          start: '2021-05-24T09:00:00',
          end: '2021-05-24T24:00:00'
        }
      ]
      viewDidMount: function(view, el) //view render hook for didMount
      {
        console.log("The view's title is " + view.currentStart.toISOString());
        console.log("The view's title is " + view.title);
      }
    });

    calendar.render();

    calendarEl.fullCalendar({
      viewRender: function(view, element) {
      }
  });
  }
}