FullCalendar resourceTimeline视图资源正常显示但事件不展示问题求助

核心排查点 #

• 事件resourceId字段匹配校验
  资源时间线视图下，所有事件必须携带resourceId字段，字段名严格为小驼峰格式，值必须和resources数组中对应资源的id完全一致，包括数据类型（如资源id为数字1时，事件resourceId不能传字符串"1"）。
• 时区与时间范围校验
  你的配置中时区固定为UTC，如果事件的start/end为本地时间，转换为UTC后可能超出你设置的slotMinTime: '08:00'、slotMaxTime: '21:00'区间，导致无法显示。可先将配置项timeZone改为'local'测试，或者统一事件时间为UTC格式。
• 事件时间格式校验
  FullCalendar要求事件start、end字段必须为ISO8601标准格式字符串（如2024-05-20T10:00:00）或原生Date对象，避免使用2024/05/20 10:00这类非标准格式。
• 依赖与版本校验
  确认所有FullCalendar相关依赖包版本完全一致，版本混用会导致功能异常。

快速测试方法 #

替换配置中的events字段为测试数据，确认基础渲染逻辑是否正常：

events: [
  {
    title: '测试事件',
    start: '2024-05-20T10:00:00',
    end: '2024-05-20T11:00:00',
    resourceId: '替换为你现有资源的正确id',
    color: '#378006'
  }
]

如果测试事件可正常显示，说明你原有事件数组的数据格式存在错误，逐行校验字段即可；如果测试事件也无法显示，可添加回调日志定位问题：

eventDidMount: function(arg) {
  console.log('事件渲染触发', arg.event)
}

若回调未触发，说明事件未被FullCalendar识别，优先排查前三个核心问题；若回调触发但页面无显示，排查自定义CSS是否遮挡或覆盖了事件元素样式。

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