如何将fullCalendar的24小时制时间转为12小时制（带AM/PM）并在popover中显示？

我懂你现在的困扰——直接拼接event.start和event.end只会输出默认的Date字符串格式，完全达不到想要的12小时制带AM/PM的效果。下面给你两种亲测有效的解决方案，帮你搞定这个问题：

方法1：用Moment.js（FullCalendar标配工具） #

FullCalendar多数版本都和Moment.js适配得很好，用它格式化时间最省心：

先确认项目里已经引入了Moment.js（没引入的话，直接在页面加个script标签就行），然后修改你的eventMouseover代码：

eventMouseover: function (event, jsEvent) {
  // 把时间格式化为12小时制，带AM/PM标识
  var formattedStart = moment(event.start).format('hh:mm A');
  var formattedEnd = moment(event.end).format('hh:mm A');
  
  $(this).popover({ 
    html: true, 
    placement: 'left', 
    trigger: 'hover', 
    content: `${formattedStart} - ${formattedEnd}`, 
    container: '#calendar' 
  }).popover('toggle');
}

格式符说明：

• hh：12小时制的小时（带前导零，比如09、02）
• mm：两位数字的分钟（带前导零）
• A：大写的AM/PM（想要小写的话换成a）

方法2：原生JavaScript实现（无需额外库） #

如果不想引入Moment.js，用原生的Intl.DateTimeFormat也能实现：

先写一个通用的格式化函数：

function formatTo12Hour(date) {
  return new Intl.DateTimeFormat('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  }).format(date);
}

再修改你的事件监听代码：

eventMouseover: function (event, jsEvent) {
  var formattedStart = formatTo12Hour(event.start);
  var formattedEnd = formatTo12Hour(event.end);
  
  $(this).popover({ 
    html: true, 
    placement: 'left', 
    trigger: 'hover', 
    content: `${formattedStart} - ${formattedEnd}`, 
    container: '#calendar' 
  }).popover('toggle');
}

为啥之前的eventRender方法没生效？ #

大概率是你在eventRender里的处理没关联到popover的动态内容——eventRender主要负责渲染事件元素本身，而popover是鼠标悬停时才生成的，所以必须在eventMouseover里直接处理时间格式化，提前在eventRender里设置是无效的。

另外要注意：确保event.start和event.end是有效的Date对象，如果你的FullCalendar配置里时间是字符串格式，得先转换成Date再格式化哦。

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