如何解决 fullCalendar is not a function TypeError 错误？答案

【问题标题】：How can I resolve fullCalendar is not a function TypeError error?如何解决 fullCalendar is not a function TypeError 错误？
【发布时间】：2021-05-23 15:35:07
【问题描述】：

我正在使用 FullCalendar 在我的应用程序中实例化一个日历，即使我可以在我的网页上看到日历，我也无法执行 fullCalendar() 函数。它给了我一个 TypeError 说 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);
      }
  });


    
  }
}

【问题讨论】：

fullCalendar 必须在日历上而不是在 calendarEl 上完成，不是吗？
@DonKnacki 如果我在日历上这样做，它仍然会给出同样的错误jQuery.Deferred exception: calendar.fullCalendar is not a function TypeError: calendar.fullCalendar is not a function
是的，对不起，我不知道这个库，但经过一番搜索，它似乎是一个你必须实例化的类：fullcalendar.io/docs/initialize-globals
@DonKnacki 在我的情况下不起作用，它给出一个错误，说 fullCalendar 没有定义
@IanBell 下面的答案对您有用吗？

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

您似乎在现代 fullCalendar 和基于 jQuery 的旧版本的语法之间搞混了。 .fullCalendar() 是在 v3 及以下版本中运行方法的方式。在 v5 中，如果你想调用一个方法，你可以直接进行。

但我认为无论如何渲染日历后您都不需要这个单独的调用。您似乎正在尝试设置视图更改时会发生什么。这可以在您的初始选项中设置，无需单独调用。

另一个问题是 viewRender 在 v5 中不再存在。它已被标准化的view render hooks 取代。

所以实际上你可以通过这种方式实现你的目标：

'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) {
      }
  });
  }
}

【讨论】：