使用高级插件实例化 FullCalendar 总是会在首次呈现日历后导致错误。是的，我在 StackOverflow 上看到过类似的问题，但它们已经过时了，因为它们处理的是包含 Scheduler.js 的旧版本(现在每个组件插件都是独立的)并且 jQuery 是一个依赖项(现在不是)。
(注意:我知道这听起来像是一个非常蹩脚的新手问题，但相信我，事实并非如此。我花了几天时间尝试做一些应该非常基本的事情 - 只是实例化日历并用它做一些事情.很明显，插件和核心日历存在一些冲突，这也许可以通过特定的脚本顺序来解决，等等，我只是无法弄清楚)
这是我的 fiddle :
<!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 处的文档对于你正在做的任何事情。他们有不同版本的库的文档，因此您不会像我一样混合不同版本的示例。
关于javascript - 如何使用脚本标签正确设置 FullCalendar？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61168367/