首次使用FullCalendar出现页面空白无报错问题，求排查缺失配置

1. 重复监听DOM加载事件：你的JS代码同时嵌套了$(document).ready()和DOMContentLoaded两个DOM加载完成回调，DOMContentLoaded事件会在$(document).ready()触发前就执行完毕，因此你写在内部的日历初始化逻辑永远不会被调用，日历自然不会渲染。
2. 视图依赖缺失：你配置的resourceTimelineWeek是FullCalendar的付费高级视图，仅引入核心的main.min.js不包含该视图的实现，即使初始化逻辑执行也无法正常渲染。

• 移除重复的DOM加载监听，仅保留一种即可
• 将初始视图替换为核心包自带的免费视图，例如月视图dayGridMonth、周视图timeGridWeek等
• 若确实需要使用资源时间线视图，需额外引入对应的付费插件依赖并注册插件后再使用

JS代码 #

$(document).ready(function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 替换为核心包自带的月视图
    initialView: 'dayGridMonth'
  });
  calendar.render();
});

HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者Glyn