如何使用脚本标签正确设置 FullCalendar？

Question

在第一次呈现日历后，使用高级插件实例化 FullCalendar 总是会导致错误。是的，我在 Whosebug 上看到过类似的问题，但它们已经过时了，因为它们处理的是包含 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>

如何使用脚本标签正确设置它？

Answer 1

设置没有任何问题。还有许多其他问题有相同的错误 calendar.fullCalendar is not a function，在其中一个问题中，接受的答案提到他们的问题（在他们的日历版本中）是插件和核心日历之间的冲突，所以我假设更改脚本的加载顺序可以解决问题。

新版本的库中不再有 fullCalendar 方法。正确的添加事件的方式其实是calendar.addEvent.

请参阅 https://www.fullcalendar.io/docs 上的文档了解您正在做的任何事情。他们有不同版本库的文档，所以你不会像我一样混合使用不同版本的示例。

如何使用脚本标签正确设置 FullCalendar？

How can I set up FullCalendar correctly with script tags?

javascript

fullcalendar

fullcalendar-4

fullcalendar-scheduler