如何解决fullCalendar不是函数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中不再存在。它已被标准化视图渲染挂钩所取代。

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

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