加载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
相关产品推荐
相关产品推荐

