FullCalendar v3升级至v6指导及常见问题解决（Salesforce环境）

1. 替换废弃的getView()方法 #

FullCalendar v6彻底弃用了v3的jQuery插件调用模式，改用类实例化方式。你之前的代码：

var view = $("#calendar").fullCalendar('getView');

需要改为以下写法：

• 先初始化Calendar实例并保存引用（不再依赖jQuery包装器）：

// 按需引入所需插件，比如月视图插件
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

// 获取日历DOM元素
const calendarEl = document.getElementById('calendar');

// 初始化日历实例
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin], // v6必须显式声明使用的插件
  initialView: 'dayGridMonth', // 设置默认视图
  // 其他配置项
});

// 渲染日历
calendar.render();

• 后续获取当前视图直接调用实例方法：

const currentView = calendar.getView();
// 或者直接访问view属性
const currentView = calendar.view;

2. 解决moment is not defined错误 #

v6默认不再内置Moment.js，官方推荐使用Day.js作为日期处理库。针对你的情况有两种解决方案：

• 方案一：迁移到Day.js
  将代码中所有moment()调用替换为dayjs()，同时在日历配置中引入Day.js插件：

  import dayjsPlugin from '@fullcalendar/dayjs';
  // 初始化时将插件加入plugins数组
  plugins: [dayGridPlugin, dayjsPlugin]
  

• 方案二：继续使用Moment.js
  手动引入Moment.js文件，同时安装并引入FullCalendar的Moment兼容插件：

  import momentPlugin from '@fullcalendar/moment';
  plugins: [dayGridPlugin, momentPlugin]
  

  注意要把Moment.js文件包含在上传到Salesforce的静态资源包中。

3. 修复动态加载事件的"display"未定义错误 #

这个错误大概率是事件数据格式不合法或动态加载逻辑错误导致的：

• 检查事件对象结构：每个事件必须包含title和start字段，禁止出现undefined属性。比如错误示例：

  // 错误：缺少start字段
  { title: '客户会议', end: '2024-05-20' }
  

  正确格式示例：

  { title: '客户会议', start: '2024-05-20T10:00:00', end: '2024-05-20T12:00:00' }
  

• 动态加载事件的正确方式：v6推荐使用calendar.addEventSource()方法，或在初始化时将events设为返回Promise的函数：

  // 从Salesforce后端动态加载事件示例
  calendar.addEventSource(async function(info, successCallback) {
    // 调用Salesforce Apex API获取事件数据
    const events = await fetch('/services/apexrest/CalendarEvents').then(res => res.json());
    successCallback(events);
  });
  

4. Salesforce环境下的部署步骤 #

步骤1：准备FullCalendar资源 #

• 下载FullCalendar v6的生产包，包含核心库、所需插件、CSS文件，以及Day.js/Moment.js（按需选择）。
• 将所有文件打包成ZIP格式。

步骤2：上传至Salesforce静态资源 #

• 登录Salesforce后台，进入设置 > 静态资源，点击新建，上传ZIP包，缓存控制选择“公用缓存”。

步骤3：在页面中引入并初始化 #

Visualforce页面示例

<apex:page>
  <!-- 引入FullCalendar样式 -->
  <link rel="stylesheet" href="{!URLFOR($Resource.FullCalendarV6, 'fullcalendar.min.css')}" />
  <!-- 引入核心JS及插件 -->
  <script src="{!URLFOR($Resource.FullCalendarV6, 'fullcalendar.min.js')}"></script>
  <script src="{!URLFOR($Resource.FullCalendarV6, 'daygrid.min.js')}"></script>
  <script src="{!URLFOR($Resource.FullCalendarV6, 'dayjs.min.js')}"></script>
  <script src="{!URLFOR($Resource.FullCalendarV6, 'dayjs-plugin.min.js')}"></script>

  <!-- 日历容器 -->
  <div id="calendar" style="width: 100%; height: 600px;"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const calendarEl = document.getElementById('calendar');
      const calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'dayjs'],
        initialView: 'dayGridMonth',
        // 可添加其他配置，比如事件点击、视图切换回调
      });
      calendar.render();
    });
  </script>
</apex:page>

LWC组件示例

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import FullCalendarV6 from '@salesforce/resourceUrl/FullCalendarV6';

export default class CalendarLWC extends LightningElement {
  calendarInitialized = false;

  renderedCallback() {
    if (this.calendarInitialized) return;
    this.calendarInitialized = true;

    // 加载样式及脚本
    Promise.all([
      loadStyle(this, FullCalendarV6 + '/fullcalendar.min.css'),
      loadScript(this, FullCalendarV6 + '/fullcalendar.min.js'),
      loadScript(this, FullCalendarV6 + '/daygrid.min.js')
    ]).then(() => {
      // 初始化日历
      const calendarEl = this.template.querySelector('#calendar');
      const calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid'],
        initialView: 'dayGridMonth'
      });
      calendar.render();
    }).catch(error => {
      console.error('FullCalendar资源加载失败:', error);
    });
  }
}

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