FullCalendar v4 升级 v6 需注意:calendar.view 必须在 render() 后访问;仅支持 ESM 导入;插件需单独导入并以对象形式传入;自定义字段须置于 extendedProps 中。

FullCalendar v4 升级 v6:calendar.view 访问时机必须后置
很多升级失败的案例,卡在 calendar.view 读不到值——不是 API 改了,是访问时机错了。v6 中 calendar.view 是惰性初始化的,**必须等 calendar.render() 执行完才能安全访问**,提前取就是 undefined。
- v4 允许在
new Calendar(...)后立即读calendar.view,v6 不行 - 常见错误写法:
const cal = new Calendar(el, options); console.log(cal.view);→ 输出undefined - 正确做法:把读取逻辑放到
calendar.render()之后,或监听datesSet回调(它保证视图已就绪) - 如果依赖视图信息做初始化(比如预设日期范围),改用
options.initialDate+options.initialView更稳妥
ES Module 导入方式成唯一推荐路径
v6 彻底移除了 UMD 构建产物,不再提供 fullcalendar.min.js 这类全局脚本。想用 script 标签直引?会报 FullCalendar is not defined。
- 必须用
+import语法,例如:import { Calendar } from 'https://cdn.skypack.dev/fullcalendar@6.1.15' - 本地开发务必通过 HTTP 服务启动(如 VS Code Live Server),否则模块加载被
file://协议拦截 - CDN 必须支持 CORS,skypack、esm.sh、jspm 都可;jsDelivr 已不推荐(部分 v6 版本未同步)
- 若项目还在用 Webpack/Vite,确认构建配置没禁用
node_modules中的 ESM 解析
插件注册方式从数组改为对象键值对
v4 的 plugins: ['dayGrid', 'timeGrid'] 写法在 v6 中失效,现在插件需显式导入并以对象形式传入。
- v6 要求:先
import dayGridPlugin from '@fullcalendar/daygrid',再plugins: [dayGridPlugin] - 所有官方插件(
@fullcalendar/timegrid、@fullcalendar/interaction等)都需单独安装和导入 -
@fullcalendar/core不再自动包含任何视图插件,漏导一个,对应视图就白屏 - 交互功能(如拖拽、点击)必须显式引入
interactionPlugin,否则eventClick等回调不会触发
事件数据结构变更:event.extendedProps 成事实标准
v4 中直接挂在 event 对象上的自定义字段(如 event.userId),v6 会被自动剥离。所有非标准字段必须收进 extendedProps 对象里,否则渲染或回调中取不到。
立即学习“前端免费学习笔记(深入)”;
- 错误示例:
{ id: '1', title: 'Meeting', userId: 123 }→event.userId在 v6 中为undefined - 正确写法:
{ id: '1', title: 'Meeting', extendedProps: { userId: 123 } } - 批量迁移可用工具函数做一次转换,避免逐条改数据源
- 注意:
event.setProp('userId', 123)这类方法仍有效,但只影响运行时,不改变原始数据结构
最易被忽略的是 render() 时机和插件导入粒度——这两个点踩中任何一个,控制台都不会报错,而是静默失效。建议升级后第一件事:打开 DevTools,在 datesSet 回调里打个断点,确认 calendar.view.type 和 calendar.view.currentStart 都能正常读出。











