FullCalendar v3升级v6：renderEvent与formatDate替代方案咨询

一、日期格式化替代（$.fullCalendar.formatDate） #

v6 移除了全局的$.fullCalendar.formatDate方法，可通过以下两种方式实现日期格式化：

1. 原生 JavaScript Date API 实现 #

v6 的drop回调中，date参数为原生Date对象，直接拼接格式化字符串即可：

value: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`

2. 使用 FullCalendar 内置工具 #

若你通过模块化方式引入 FullCalendar，可导入核心包的formatDate函数：

// 模块化导入（需确保已安装@fullcalendar/core）
import { formatDate } from '@fullcalendar/core';

// 格式化调用
value: formatDate(date, { year: 'numeric', month: '2-digit', day: '2-digit' })

二、renderEvent替代及重复事件问题解决 #

v3 的$("#calendar").fullCalendar("renderEvent", ...)在 v6 中已废弃，正确方式是通过日历实例调用addEvent，你遇到的重复问题源于代码逻辑错误，修复方案如下：

1. 提前保存日历实例 #

初始化日历时务必保存实例引用，后续操作都基于该实例：

// 初始化日历并保存实例
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  // 你的日历配置（包含drop回调）
});
calendar.render();

2. 修正事件添加逻辑 #

你的代码存在未使用定义变量、对象引用混乱的问题，修正后代码：

.done(function(data) {
  if (data.success) {
    var event = data.event;
    // 直接使用服务器返回数据构建事件对象
    var eventDataObj = {
      id: event.id,
      title: `${event.id} : ${event.title}`,
      start: event.start, // 确保服务器返回ISO字符串或合法Date对象
      end: event.end
    };

    // 通过日历实例调用addEvent，第二个参数true表示持久化到事件源
    calendar.addEvent(eventDataObj, true);
  }
});

重复事件原因说明 #

你之前用$("#calendar").addEvent属于非标准用法，v6 不再支持通过jQuery选择器直接调用日历方法，且代码中未使用正确的事件对象（定义了eventDataObj却用了未声明的eventObject），双重原因导致重复显示。使用初始化时保存的日历实例调用addEvent是官方推荐的正确方式。

三、完整修正后的drop回调示例 #

drop: function(date, allDay) {
  var dataStr = [
    {
      name: "calendar_event_title",
      value: $("#calendarInput").val()
    },
    {
      name: "calendar_date_start",
      value: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    }
  ];

  dataStr = $.param(dataStr);

  $.ajax({
    // 补充你的AJAX配置（url、请求类型、请求头等）
  })
  .done(function(data) {
    if (data.success) {
      var event = data.event;
      var eventDataObj = {
        id: event.id,
        title: `${event.id} : ${event.title}`,
        start: event.start,
        end: event.end
      };

      calendar.addEvent(eventDataObj, true);
    }
  });
}

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