在Salesforce LWC中无法加载FullCalendar高级插件及resourceTimeGridDay视图

问题根源分析 #

出现Error: The FullCalendar view "resourceTimeGridDay" does not exist的核心原因有两个：

1. 缺失resource-common核心依赖脚本的加载，resource-timegrid插件依赖该基础组件才能正常工作
2. 插件名称使用了错误的格式（短横线分隔），FullCalendar v4的UMD版本要求插件名称为驼峰格式

具体修复步骤 #

1. 补充resource-common脚本加载 #

在renderedCallback的第二个Promise.all中，添加resource-common的脚本加载，且放在resource-timegrid之前（保证依赖顺序）：

Promise.all([
    loadScript(this, fullCalendar + "/packages/daygrid/main.js"),
    // 新增resource-common脚本加载
    loadScript(this, fullCalendar + "/packages-premium/resource-common/main.min.js"),
    loadScript(this, fullCalendar + "/packages-premium/resource-timegrid/main.min.js"),
    loadStyle(this, fullCalendar + "/packages/daygrid/main.css"),
    loadScript(this, fullCalendar + "/packages/list/main.js"),
    loadStyle(this, fullCalendar + "/packages/list/main.css"),
    loadScript(this, fullCalendar + "/packages/timegrid/main.js"),
    loadStyle(this, fullCalendar + "/packages/timegrid/main.css"),
    loadScript(this, fullCalendar + "/packages/interaction/main.js"),
    loadScript(this, fullCalendar + "/packages/moment/main.js"),
    loadScript(this, fullCalendar + "/packages/moment-timezone/main.js"),
])

2. 修正plugins数组的名称格式 #

FullCalendar v4的UMD版本要求插件名称使用驼峰格式，而非短横线分隔。修改init方法中的plugins数组：

plugins: [
    "dayGrid",
    "timeGrid",
    "list",
    "interaction",
    "moment",
    "momentTimezone", // 修正原"moment-timezone"为驼峰格式
    "resourceCommon", // 修正原"resource-common"为驼峰格式
    "resourceDayGrid", // 修正原"resource-daygrid"为驼峰格式
    "resourceTimeGrid", // 修正原"resource-timegrid"为驼峰格式
    "resourceTimeline", // 修正原"resource-timeline"为驼峰格式
    "timeline"
],

3. 验证资源文件路径 #

确认Static Resource fullCalendar_v4_premium的文件结构与加载路径一致：

• 确保/packages-premium/resource-common/main.min.js和/packages-premium/resource-timegrid/main.min.js文件存在
• 如果使用未压缩版本，将路径中的main.min.js改为main.js

4. 确认许可证密钥有效性 #

确保schedulerLicenseKey的类型与使用场景匹配，FullCalendar v4的Scheduler插件需要正确的许可证才能完全激活所有功能。

验证修复 #

修改完成后，重新部署LWC组件，点击切换到resourceTimeGridDay视图的按钮，即可正常加载资源日历视图。

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