FullCalendar月视图跨天事件仅显示单日的解决方法求助

嘿，这个问题我之前也碰到过！FullCalendar在月视图里默认对于这种短时长的跨天事件，只会在开始日期显示，要让它同时出现在开始和结束日期，只需要调整几个配置项就行：

• 根据FullCalendar版本设置结束显示配置：

  • 如果你用的是FullCalendar 5.x及以上版本，在初始化配置里加上 displayEventEnd: true，这个参数会让事件在月视图中延伸到结束日期的格子里。
  • 要是用的是v4及更早的版本，对应的配置是 showEventEnd: true。

• 确保事件时间格式准确（可选但推荐）：
  虽然FullCalendar能解析你用的"04/18/2018 22:05:00"这种字符串，但为了避免解析偏差，最好把start和end转换成JavaScript的Date对象再传给FullCalendar，比如：

  {
    title: '跨天测试事件',
    start: new Date('2018-04-18T22:05:00'),
    end: new Date('2018-04-19T02:05:00')
  }
  

• 可选：自定义跨天事件样式：
  如果开启结束显示后，事件的外观不符合预期，可以通过eventClassNames或者自定义CSS调整，比如让跨天事件的两端显示更贴合日期格子。

举个完整的v5+版本初始化示例：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    displayEventEnd: true, // 关键配置
    events: [
      {
        title: '我的跨天事件',
        start: '04/18/2018 22:05:00',
        end: '04/19/2018 02:05:00'
      }
    ]
  });
  calendar.render();
});

这样设置之后，你的4小时跨天事件就会同时显示在4月18日和4月19日的月视图格子里了～

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