FullCalendar月视图显示时间范围问题：仅显示开始时间，eventTimeFormat无效

问题核心：FullCalendar的eventTimeFormat配置仅在事件同时存在start和end字段时才会渲染时间范围，当end为null时，组件默认只显示开始时间，这是内置逻辑。

以下是两种可行解决方案：

方案1：补全事件的end字段 #

优先从数据层面补全结束时间，让eventTimeFormat正常生效：

后端调整 #

如果事件本身应该有结束时间，让后端接口为无end的事件返回合理值，比如：

• 与start同天的23:59:59（适合全天类事件）
• 基于业务规则的时长（比如start加1小时，适合短时长事件）

前端预处理 #

如果无法修改后端，可以在前端遍历事件数据，为无end的事件生成默认结束时间：

// 预处理事件数组
const processedEvents = yourRawEvents.map(event => {
  if (!event.end) {
    const newEvent = {...event};
    // 示例：给无结束时间的事件加1小时结束时间
    newEvent.end = new Date(newEvent.start.getTime() + 60 * 60 * 1000);
    // 也可设置为当天结束：
    // newEvent.end = new Date(newEvent.start);
    // newEvent.end.setHours(23, 59, 59);
    return newEvent;
  }
  return event;
});

// 初始化日历
document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'dayGridMonth',
    events: processedEvents,
    eventTimeFormat: { // 此时该配置会正常生效
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    }
  });
  calendar.render();
});

方案2：自定义事件内容（无需修改end字段） #

如果不想改动事件的end字段，可通过eventContent自定义渲染逻辑，手动拼接时间显示：

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'dayGridMonth',
    events: yourRawEvents,
    eventContent: function(arg) {
      // 格式化开始时间
      const startTime = arg.event.start.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      });
      
      let timeDisplay = startTime;
      if (arg.event.end) {
        // 有结束时间时显示时间范围
        const endTime = arg.event.end.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        });
        timeDisplay = `${startTime}-${endTime}`;
      } else {
        // 无结束时间时自定义显示文案
        timeDisplay = `${startTime} 起`;
      }

      // 组装事件内容
      const contentEl = document.createElement('div');
      contentEl.innerHTML = `<div class="fc-event-title">${arg.event.title}</div>
                            <div class="fc-event-time">${timeDisplay}</div>`;
      return { domNodes: [contentEl] };
    }
  });
  calendar.render();
});

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