Laravel 8 引入npm版FullCalendar-scheduler 5.6 未定义报错

• 你当前使用的fullcalendar-scheduler@5.6.0是ES模块化架构的包，默认不会向window全局挂载FullCalendar变量，blade模板里依赖全局调用的初始化代码会直接抛Uncaught ReferenceError: FullCalendar is not defined。
• 直接import 'fullcalendar-scheduler'的写法没有加载v5架构要求的独立核心包、功能插件包，导致日历初始化逻辑执行时依赖缺失，脚本执行阻塞表现为程序卡住。
• scss文件里引用的css路径和v5版本的实际文件结构不匹配，会导致编译时报错进一步阻塞构建流程。

1. 补全FullCalendar v5版本的必备依赖 #

执行安装命令，把日历核心、常用功能插件、scheduler专属组件装到本地：

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/resource-timeline

2. 修正resources/js/app.js的引入和全局挂载逻辑 #

替换原来错误的全量引入代码，按需导入模块并挂载到全局，兼容你blade模板中原有基于全局变量的初始化写法：

import 'jquery';
require('./bootstrap');
import moment from 'moment';

// 导入FullCalendar核心与需要用到的功能插件
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

// 统一挂载到window全局，解决未定义报错
window.FullCalendar = {
  Calendar,
  dayGridPlugin,
  timeGridPlugin,
  interactionPlugin,
  listPlugin,
  resourceTimelinePlugin,
  moment
};

3. 修正resources/sass/app.scss的css引用路径 #

删除原来错误的@import "~fullcalendar-scheduler/main.css";语句，替换为v5版本对应的css路径，其余原有引入语句保持不变：

@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
@import "~@fullcalendar/timegrid/main.css";
@import "~@fullcalendar/list/main.css";
@import "~@fullcalendar/resource-timeline/main.css";

4. 重新执行构建命令 #

npm run dev

• 检查blade模板中是否存在重复引入jQuery的情况（比如app.js已经打包引入了jQuery，又在页面单独引入了CDN版jQuery），双实例冲突会导致脚本执行阻塞、日历初始化卡住。
• 如果你之前用的CDN是FullCalendar v3/v4版本，注意v5存在API不兼容的改动，挂载完全局变量后如果初始化参数报错，可以对照v5文档调整初始化配置项，不需要回退老版本依赖。
• 构建前可以先删除public/js、public/css目录下的旧打包文件，避免旧缓存文件影响调试。

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