使用高级插件实例化FullCalendar总是会在第一次呈现日历后导致错误。是的，我在StackOverflow上看到过类似的问题，但它们已经过时了，因为它们处理的是一个旧版本，其中包含Scheduler.js(现在每个组件插件都是独立的(，jQuery是一个依赖项(现在不是(。
(注意：我知道这听起来像是一个非常蹩脚的新手问题，但相信我，事实并非如此。我花了几天时间试图做一些应该非常基本的事情——只是实例化日历并用它做一些事情。(。很明显，插件和核心日历之间存在一些冲突，这可能可以通过特定的脚本顺序来解决，等等，我只是没能弄清楚(
这是我的小提琴：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.js'></script>
</head>
<body>
<script type="text/javascript">
var test;
var eventToAdd;
var calendarEl;
var calendar;
$(document).ready(function () {
calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeline', 'dayGrid', 'timeGrid', 'interaction' ],
now: '2020-04-01',
editable: true,
aspectRatio: 1.8,
scrollTime: '00:00',
header: {
left: 'today prev,next',
center: 'title',
right: 'timelineDay,timeGridWeek,dayGridMonth'
},
defaultView: 'timeGridWeek',
minTime: "08:00",
maxTime: "22:00",
displayEventEnd: true,
selectable: true,
select: function (info) {
var newEvent = new Object();
newEvent.title = "New Event!";
newEvent.start = moment(info.start).format();
newEvent.allDay = false;
eventToAdd = newEvent;
calendarEl.fullCalendar('renderEvent', eventToAdd); //calendarEl.fullCalendar is not defined, so this throws calendarEl.fullCalendar is not a function
}
});
//Calling calendarEl.fullCalendar after the above code to instantiate it, throws the error that says calendarEl.fullCalendar is not a function
var newEvent = new Object();
newEvent.title = "New Event!";
newEvent.start = moment(moment(new Date()).format()).format();
newEvent.allDay = false;
eventToAdd = newEvent;
//calendarEl.fullCalendar('renderEvent', eventToAdd); //Calling calendarEl.fullCalendar after the above code to instantiate it, throws the error that says calendarEl.fullCalendar is not a function
calendar.render();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
p {
text-align: center;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
.fc-resource-area td {
cursor: pointer;
}
</style>
<div id='calendar'></div>
</body>
</html>如何使用脚本标记正确设置它？
设置没有任何问题。还有许多其他问题也有相同的错误calendar.fullCalendar is not a function，在其中一个问题中，公认的答案提到，他们的问题(在他们的日历版本中(是插件和核心日历之间的冲突，所以我认为更改脚本的加载顺序可以解决问题。
新版本的库中不再有fullCalendar方法。添加事件的正确方式实际上是calendar.addEvent。
请参阅上的文档https://www.fullcalendar.io/docs为你正在做的任何事情。他们有不同版本库的文档，所以你不会像我那样混合不同版本的示例。