FullCalendar事件在笔记本和安卓正常显示 仅iPhone端不显示如何解决

FullCalendar iOS端事件不显示排查方案 #

核心原因（大概率）：Safari日期解析不兼容 #

你代码中拼接日期的写法let my_start = date + ' ' + b.period.start_at生成的是YYYY-MM-DD HH:MM格式的字符串，这种非ISO标准的带空格日期格式，Chrome、安卓浏览器做了兼容解析，但是iOS Safari完全不支持，Date.parse()调用后会返回NaN，生成的Date对象为无效值。
FullCalendar拿到无效的起止时间后，会把事件定位到不可见的区域，所以你能在DOM里找到fc-event-title元素，但页面上看不到事件。

修复代码：
把空格替换为ISO标准的时间分隔符T即可，也可以补充时区标识避免时区偏移：

// 原错误写法
// let my_start = date + ' ' + b.period.start_at
// let myend_at = date + ' ' + b.period.end_at

// 修复后写法
let my_start = date + 'T' + b.period.start_at + '+08:00' // 东八区按需修改时区
let myend_at = date + 'T' + b.period.end_at + '+08:00'

其他排查方向 #

• 样式冲突排查：用Safari远程调试功能连接iPhone，选中事件元素检查计算样式，确认z-index、opacity、position属性是否正常，是否被父元素overflow裁剪或者被其他元素遮挡
• 版本兼容性：如果使用的是v3及以下旧版FullCalendar，可升级到对应大版本的最新稳定补丁，旧版本存在iOS端事件渲染的已知兼容问题
• 时间逻辑校验：在iOS端控制台打印生成的events数组，确认每一项的start、end属性均为有效Date对象，不存在Invalid Date

内容的提问来源于stack exchange，提问作者ali al-baiti