ES6构建下FullCalendar的initialView与headerToolbar配置失效问题

根本原因是项目依赖里同时混装了FullCalendar v4和v5两个大跨度不兼容的版本，构建时出现版本冲突，导致自定义配置全部失效：

• 你代码里导入的所有@fullcalendar/*前缀的包都是4.4.2版本
• 依赖列表里额外安装的fullcalendar@5.11.0、fullcalendar-scheduler@5.10.2是v5版本的总包
  两个大版本的API存在破坏性变更：
• v4版本根本不识别headerToolbar、initialView这两个配置项，v4对应的配置名是header、defaultView
• 构建打包时两个版本的核心代码被重复引入，运行时实际加载的逻辑和你导入的v4插件不匹配，才会出现配置写了完全不生效、只能靠调整插件数组顺序改初始视图、把list插件放首位也切不到列表视图的异常，这种内部版本冲突不会抛出显性的控制台报错，很难排查。
  另外你当前引入的CSS文件全是v4版本的路径，和v5版本的文件结构也不匹配。

二选一即可，核心原则是所有FullCalendar相关依赖必须保持同一个大版本号，绝对不能混装。

方案一：统一升级到v5版本（推荐，v4已停止维护） #

1. 先清空所有冲突的FullCalendar相关依赖：

npm uninstall @fullcalendar/core @fullcalendar/list @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/bootstrap @fullcalendar/google-calendar @fullcalendar/interaction fullcalendar fullcalendar-scheduler

2. 重新安装v5版本的官方scoped包，v5版本不需要安装名为fullcalendar的总包，所有功能都以@fullcalendar/*前缀的独立包发布：

npm install @fullcalendar/core@^5.11.0 @fullcalendar/list@^5.11.0 @fullcalendar/daygrid@^5.11.0 @fullcalendar/timegrid@^5.11.0 @fullcalendar/interaction@^5.11.0

如果需要使用高级排期功能，安装对应v5版本的@fullcalendar/resource-*系列包即可，不要安装旧版的fullcalendar-scheduler包。
3. 修正Laravel Mix中的CSS引入路径，v5版本的CSS文件是包目录下的main.min.css：

mix.js('resources/js/Calendar/main-calendar.js', 'public/js')
.postCss('node_modules/@fullcalendar/core/main.min.css', 'public/css/fullcalendar/core.css')
.postCss('node_modules/@fullcalendar/daygrid/main.min.css', 'public/css/fullcalendar/daygrid.css')
.postCss('node_modules/@fullcalendar/timegrid/main.min.css', 'public/css/fullcalendar/timegrid.css')
.postCss('node_modules/@fullcalendar/list/main.min.css', 'public/css/fullcalendar/list.css')
.sass('resources/sass/calendar.scss', 'public/css')

4. 你当前写的JS逻辑里的initialView、headerToolbar都是v5的标准API，不需要修改，重新执行构建命令后配置就会正常生效。

方案二：保留v4版本（不想升级版本时选这个） #

1. 卸载导致冲突的v5版本包：

npm uninstall fullcalendar fullcalendar-scheduler

2. 把JS代码里的配置项替换为v4支持的字段：
   • initialView替换为defaultView，v4下的列表周视图名称是listWeek，不是list
   • headerToolbar替换为header
     修改后的实例化代码参考：

var calendar = new Calendar(calendarEl, {
  plugins: [listPlugin, dayGridPlugin, timeGridPlugin],
  defaultView: "listWeek",
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  }
})

3. 你当前写的CSS引入路径是v4版本的正确路径，不需要调整，重新构建即可恢复正常。

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