Fullcalendar事件结束时间显示异常问题求助
Fullcalendar 事件结束时间显示异常的排查与解决
看起来你遇到的问题核心大概率是字段名不匹配加上日期格式解析的问题,结合你的代码和描述,我来一步步帮你解决:
核心问题1:Fullcalendar 无法识别你的结束时间字段
Fullcalendar 的事件对象默认要求结束时间的字段名为 end,但你的 SQL 查询里把 event_stop 别名为了 stop —— 这就导致 Fullcalendar 找不到正确的结束时间数据,自然显示异常!
快速解决:修改 SQL 字段别名
直接把 SQL 里的 stop 改成 end,同时建议把标题字段也改成 Fullcalendar 默认的 title(虽然你用了法语本地化,但事件字段名还是遵循英文默认规则):
SELECT DISTINCT id, event_titre as 'title', event_start as 'start', event_stop as 'end' FROM tmp;
核心问题2:日期格式解析问题
你的数据库日期是 DATETIME 格式,PHP 直接 json_encode 后是字符串,Fullcalendar 可能无法正确解析为时间对象,尤其是时区相关的问题。
解决方法:后端转换为 ISO 8601 格式
在 PHP 循环处理事件时,把 DATETIME 字符串转换为标准的 ISO 8601 格式(Fullcalendar 能完美识别):
while ($row = $result->fetch_assoc()) { // 将数据库的 DATETIME 转换为 ISO 8601 格式 $row['start'] = date('c', strtotime($row['start'])); $row['end'] = date('c', strtotime($row['end'])); // 对应修改后的字段名 $events[] = $row; } $buildingevents = json_encode($events);
备选方案:前端手动映射字段并解析日期
如果你不想修改后端代码,可以在前端用 Moment.js 解析日期,同时手动映射字段:
jQuery(document).ready(function() { var bevents = <?php echo $buildingevents; ?>; // 处理每个事件:映射字段 + 解析日期 var processedEvents = bevents.map(function(event) { return { id: event.id, title: event.titre, start: moment(event.start).toDate(), // 用 Moment.js 解析日期 end: moment(event.stop).toDate() // 把 stop 字段映射为 end }; }); jQuery('#calendar').fullCalendar( { header: { right: 'today, month, agendaDay, agendaWeek, prev, next' }, defaultDate: '<?php echo $_SESSION['statDateFrom']; ?>', events: processedEvents, timezone: 'local' }); });
额外建议
- 打开浏览器的开发者工具(Console 面板),查看
bevents的输出,确认start和stop字段的日期格式是否正确 - 如果你坚持用
ignoreTimeZone: true,需要确保前后端的时区完全一致,避免时间偏移
内容的提问来源于stack exchange,提问作者nico
相关产品推荐
相关产品推荐

