FullCalendar未定义错误排查：员工休假日历页面白屏问题

以下是最可能的几个原因及解决办法：

• FullCalendar 核心资源未正确引入
  这是最常见的问题。检查calendar-view.php里是否按正确顺序引入了FullCalendar的CSS和JS文件，注意依赖顺序：

  • 若用FullCalendar v5及更早版本，先引入jQuery，再引入FullCalendar的JS；v6+无需jQuery
  • 先加载CSS文件，再加载JS文件，最后写初始化代码
    示例正确引入方式：

  <!-- FullCalendar CSS -->
  <link rel="stylesheet" href="fullcalendar/main.min.css">
  <!-- FullCalendar JS (v6+无需jQuery) -->
  <script src="fullcalendar/main.min.js"></script>
  <!-- 初始化脚本 -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const calendar = new FullCalendar.Calendar(calendarEl, {
        events: 'calendar.php' // 你的数据源地址
      });
      calendar.render();
    });
  </script>
  

  同时确认文件路径是否正确，比如fullcalendar文件夹是否和calendar-view.php在同一目录，路径写错会导致资源加载404，自然找不到FullCalendar对象。

• 版本不匹配导致初始化代码错误
  如果你用的是FullCalendar v6+，但初始化代码还是旧版本的$('#calendar').fullCalendar()写法，肯定会报错。v6+改用new FullCalendar.Calendar()的构造函数方式初始化，且不再依赖jQuery，别搞错写法。

• 初始化代码执行过早
  如果初始化脚本写在FullCalendar JS文件之前，或者DOM还没加载完成就执行，会导致找不到FullCalendar对象或目标DOM元素。务必把初始化脚本放在body末尾，或者用DOMContentLoaded事件包裹，确保资源和DOM都准备好再执行。

• 资源加载失败
  打开浏览器开发者工具的Network面板，查看FullCalendar相关的CSS和JS文件的请求状态。如果是404，修正路径；如果是跨域错误，调整资源存放位置或配置服务器允许跨域。

• 浏览器缓存干扰
  有时候浏览器缓存了旧的页面资源，导致新引入的FullCalendar文件没加载。按Ctrl+F5强制刷新页面，或者清除浏览器缓存后再测试。

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