React FullCalendar end时间显示异常问题求助

问题原因 #

在dayGridMonth视图下，FullCalendar默认会将跨天事件识别为全天事件，即便你给end设置了具体时间，弹窗的默认格式化逻辑也会忽略时间部分，将end时间显示为次日的12:00am（本质是把end日期当作排他性的全天事件结束点）。

解决方案 #

方案1：显式标记事件为非全天事件 #

在每个事件对象中添加allDay: false，强制FullCalendar将事件按非全天事件处理，弹窗会正确渲染end的具体时间：

<FullCalendar
  plugins={[dayGridPlugin]}
  dayMaxEventRows={4}
  initialView="dayGridMonth"
  events={[
    {
      title: 'test',
      start: '2023-03-22T12:00:00',
      end: '2023-03-24T10:00:00',
      color: 'green',
      allDay: false
    },
    {
      title: 'test2',
      start: '2023-03-22T13:30:00',
      end: '2023-03-24T14:00:00',
      color: 'orange',
      allDay: false
    },
    {
      title: 'test3',
      start: '2023-03-22T09:30:00',
      end: '2023-03-24T11:00:00',
      color: 'blue',
      allDay: false
    },
    {
      title: 'test4',
      start: '2023-03-22T14:30:00',
      end: '2023-03-24T12:30:00',
      color: 'red',
      allDay: false
    },
    {
      title: 'test5',
      start: '2023-03-22',
      end: '2023-03-24T18:00:00',
      color: 'black',
      allDay: false
    },
  ]}
/>

方案2：自定义事件弹窗内容 #

如果需要保留全天事件的展示逻辑，但要正确显示end时间，可以通过eventPopover（FullCalendar v6+）自定义弹窗内容，手动格式化日期时间：

<FullCalendar
  plugins={[dayGridPlugin]}
  dayMaxEventRows={4}
  initialView="dayGridMonth"
  events={[/* 你的事件数组 */]}
  eventPopover={({ event }) => {
    const start = new Date(event.start);
    const end = new Date(event.end);
    return (
      <div style={{ padding: '10px' }}>
        <h3>{event.title}</h3>
        <p>开始: {start.toLocaleString()}</p>
        <p>结束: {end.toLocaleString()}</p>
      </div>
    );
  }}
/>

补充说明 #

• FullCalendar的end属性是排他性的：比如end: '2023-03-24T10:00:00'表示事件在3月24日10:00之前结束，而非包含该时间点。
• 若使用v5版本，自定义弹窗需使用eventRender钩子替代eventPopover。

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