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

Question

我正在使用 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);
      }
  });


    
  }
}

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

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

How can I resolve fullCalendar is not a function TypeError error?

javascript

fullcalendar

fullcalendar-5