试图让我的第一个 FullCalendar 工作

Question

我刚刚开始尝试实施 FullCalendar；但是，我的显示屏是空白的，控制台日志或日志中没有任何错误消息。请问我还没有包括什么？

HTML:

$(document).ready(function() {
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'resourceTimelineWeek'
    });
    calendar.render();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<div id='calendar'></div>

Answer 1

您在 jQuery 的 $(document).ready() 上向 DOMContentLoaded 添加了一个事件侦听器。那时 DOMContentLoaded 已经发生，所以你附加到 DOMContentLoaded 的监听器永远不会执行。

使用两者之一，而不是两者。

第二个错误是您加载了错误的 fullCalendar 脚本。要使用“resourceTimelineWeek”，您需要包含 <script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js"></script>（以及相应的 CSS）。

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'resourceTimelineWeek'
  });
  calendar.render();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.10.1/main.min.js"></script>
<div id='calendar'></div>

试图让我的第一个 FullCalendar 工作

Trying to get my first FullCalendar to work

html

javascript

fullcalendar