如何将fullCalendar中Google日历事件改为12小时制显示？

首先直接回应你的疑问：timeFormat在fullCalendar旧版本（v3及更早）中确实是控制时间显示的正确配置项，但在v4及更高版本中，这个配置已经被废弃了——这很可能就是你设置后没效果的核心原因。

下面分两种情况给你具体的解决方案：

1. 如果你使用的是fullCalendar v3 或更早版本 #

timeFormat是正确的配置，但你可以先检查以下几点：

• 确认格式字符串是否符合v3的规则：v3中timeFormat支持的占位符包括h（12小时制小时）、mm（分钟）、t（小写上午/下午缩写，如am/pm）、tt（大写AM/PM）。你可以尝试调整格式字符串，比如改成：

  timeFormat: 'h:mm tt'
  

• 如果日程视图（agendaWeek/agendaDay）左侧的时间轴还是24小时制，还需要额外配置axisFormat来控制时间轴的显示：

  axisFormat: 'h(:mm)t'
  

• 确保没有其他配置项（比如单个事件源的独立设置）覆盖了timeFormat。

2. 如果你使用的是fullCalendar v4 及更高版本（v4/v5/v6） #

这个版本彻底移除了timeFormat，拆分出两个更明确的配置项：

• eventTimeFormat：控制日历事件条目上显示的时间格式
• slotLabelFormat：控制日程视图左侧时间轴的格式

你需要把代码中的timeFormat替换成这两个配置，示例如下：

$(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    // 替换原来的timeFormat为这两个配置
    eventTimeFormat: 'h(:mm)t',
    slotLabelFormat: 'h(:mm)t',
    timezone: 'America/Toronto',
    googleCalendarApiKey: 'hidden',
    eventSources: [{
      googleCalendarId: 'hidden',
      className: 'calendar'
    }]
  });
});

如果是v4版本，可能需要用对象格式配置（v5+支持更简洁的字符串格式）：

eventTimeFormat: {
  hour: 'numeric',
  minute: '2-digit',
  meridiem: 'short'
},
slotLabelFormat: {
  hour: 'numeric',
  minute: '2-digit',
  meridiem: 'short'
}

额外注意点 #

Google日历自身的时间格式设置不会影响fullCalendar的显示——fullCalendar完全按照自己的配置来渲染时间，所以不管Google那边怎么设置，你都需要在fullCalendar中明确配置时间格式。

建议你先确认自己使用的fullCalendar版本（可以查看引入的JS/CSS文件的版本号），再对应调整配置，应该就能解决24小时制显示的问题了。

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