Laravel集成fullCalendar时displayEventTime显示12a及结束时间缺失问题

• 第一步：校验控制器返回字段格式
  fullCalendar要求事件必须包含start、end两个指定字段，时间格式需符合ISO8601标准，Laravel中可通过Carbon实例的toIso8601String()方法生成符合要求的格式，参考代码：

// 控制器事件返回逻辑示例
$events = YourEventModel::query()
    ->get()
    ->map(function ($event) {
        return [
            'id' => $event->id,
            'title' => $event->title,
            'start' => $event->start_time->toIso8601String(),
            'end' => $event->end_time->toIso8601String(),
            'allDay' => false, // 非全天事件必须设为false，否则默认不展示具体时间
            // 其余自定义字段
        ];
    });
return response()->json($events);

如果你不想修改返回字段名为start/end，可以在fullCalendar配置中添加字段映射：

eventDataTransform: (eventData) => {
  eventData.start = eventData.start_time;
  eventData.end = eventData.end_time;
  return eventData;
}

• 第二步：校验模型日期字段配置
  需在模型中将事件的起止时间字段转为datetime类型，避免返回字符串格式时间无法被fullCalendar正确解析：

// 模型代码示例
class YourEventModel extends Model
{
    protected $casts = [
        'start_time' => 'datetime',
        'end_time' => 'datetime',
    ];
}

• 第三步：校验fullCalendar初始化参数
  需同时开启displayEventTime和displayEventEnd两个参数，可自定义时间格式避免12小时制显示歧义：

// 视图中fullCalendar初始化配置示例
const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    // 其余基础配置
    displayEventTime: true,
    displayEventEnd: true,
    eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false // 关闭12小时制，可按需调整
    }
});

• 第四步：异常排查
  可先通过浏览器开发者工具查看事件接口的返回值，确认：
  • 所有事件都存在end字段且值不为空
  • end字段的时间值晚于对应start字段的时间值
  • 非全天事件的allDay字段值为false

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