FullCalendar单个事件无法显示问题求助

针对你遇到的问题——硬编码事件已被日历识别但界面不可见、eventContent仅在手动创建事件时输出日志，以下是具体排查点：

1. 资源视图下事件缺少资源绑定 #

你使用了resourceTimeGridPlugin（资源时间网格视图），这类视图要求事件必须绑定到具体资源，否则无法在对应资源列中渲染：

• 硬编码事件未指定resourceId字段，而手动创建的事件在select函数中明确关联了resource.id；
• 日历能识别该时间段存在事件（禁止重复创建），但因找不到对应资源列，所以无法显示。

修复方案：给硬编码事件添加resourceId，匹配现有资源的id：

function fetchEvents(
  _info: any,
  successCallback: (events: any[]) => void,
  _failureCallback: any
) {
  const eventsData = [
    {
      id: 1,
      title: "Hardcoded Event",
      start: "2023-11-29T06:15:00",
      resourceId: 1 // 绑定到id为1的资源
    },
  ];
  successCallback(eventsData);
}

2. eventContent参数类型错误 #

你定义的eventContent参数为EventApi，但FullCalendar实际传入的是包含event属性的对象（而非直接的EventApi实例）。这会导致硬编码事件加载时arg.event为undefined，触发CalendarEvent.fromEventApi报错，最终事件内容为空且日志无法输出。

修复方案：修正参数类型定义：

const eventContent = (arg: { event: EventApi }): { html: string } => {
  const htm = CalendarEvent.fromEventApi(arg.event).innerHTML;
  console.log(htm);
  return { html: htm };
};

同时移除// @ts-ignore注释，类型匹配后无需忽略TS检查。

3. 重复加载插件导致冲突 #

初始化日历的plugins数组中重复添加了resourceTimeGridPlugin，可能引发视图渲染异常：

plugins: [
  interactionPlugin,
  luxon2Plugin,
  resourceTimeGridPlugin,
  // resourceTimeGridPlugin, // 删除重复的插件
  scrollGridPlugin,
],

4. 自定义CalendarEvent类异常 #

如果上述修复后仍不显示，需排查CalendarEvent.fromEventApi的实现：

• 临时替换eventContent为简单内容测试：

  const eventContent = (arg: { event: EventApi }): { html: string } => {
    console.log("Event data:", arg.event); // 确认事件数据是否正常
    return { html: `<div>${arg.event.title}</div>` };
  };
  

• 如果简单内容能显示，说明CalendarEvent类处理硬编码事件时存在逻辑错误，需检查其fromEventApi和innerHTML的实现。

5. 时区与业务时间匹配验证 #

日历设置了Pacific/Auckland时区，需确认：

• 硬编码事件的start时间转换到奥克兰时区后，处于对应资源的businessHours范围内；
• 例如资源1的businessHours包含daysOfWeek: [0,2,3]（周日、周二、周三），需确保事件日期属于这些天数。

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