You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

加载fullcalendar.io事件出错:控制台有数据但日历无展示

问题原因及解决方法
  • 日期格式不符合FullCalendar要求
    FullCalendar默认仅支持ISO 8601标准的日期格式(如YYYY-MM-DD HH:mm、YYYY-MM-DDTHH:mm:ss),你当前使用DD/MM/YYYY HH:mm格式的字符串作为start/end值,FullCalendar无法识别为有效时间,因此不会渲染事件。
    解决:修改moment格式化逻辑即可:
start: moment(response[i].StartDate).format('YYYY-MM-DD HH:mm'),
end: moment(response[i].EndDate).format('YYYY-MM-DD HH:mm'),

也可以直接传递moment对象,不需要转字符串,FullCalendar原生支持moment类型的时间值。

  • 新增数据源后未触发重新渲染(针对FullCalendar v5及以上版本)
    部分版本的FullCalendar调用addEventSource后不会自动刷新日历视图,需要手动调用render方法触发重绘,在calendar.addEventSource(events);后新增一行代码:
calendar.render();
  • 确认后端返回的日期可被moment正常解析
    ASP.NET MVC序列化DateTime类型时,默认会返回/Date(时间戳)/格式的字符串,如果moment解析失败会生成无效时间,也会导致事件不展示。可以直接在后端把日期转成标准格式字符串再返回:
    修改后端ViewModel新增字符串类型的时间字段:
public string StartDateStr { get; set; }
public string EndDateStr { get; set; }

赋值时直接格式化:

StartDateStr = s.StartDate.ToString("yyyy-MM-dd HH:mm"),
EndDateStr = s.EndDate.ToString("yyyy-MM-dd HH:mm"),

前端直接读取该字段使用即可,不需要额外做格式化处理。

  • 可选优化:简化旧事件移除逻辑
    不需要遍历移除所有旧事件源,可以直接调用calendar.removeAllEvents()清空已有事件,代码更简洁。

内容的提问来源于stack exchange,提问作者Mustafa Boyraz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.24 15:24:04