FullCalendar日期选择自动多增一天问题排查求助

FullCalendar的日期范围采用排他性结束日期设计——这是你遇到问题的核心原因：组件内部的end参数对应的日期是不包含在选中范围内的。当你选择2023-11-20至2023-11-22时，组件会自动将end设为2023-11-23，最终显示时就会看起来多了一天。

针对这个问题，你可以从以下几个方向调整：

• 处理选中后的日期展示：获取到选中范围的start和end后，将end日期往前推一天再用于展示或业务逻辑：

  // 示例：处理select事件返回的日期范围
  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      select: function(info) {
        // 修正结束日期
        const correctedEnd = new Date(info.end);
        correctedEnd.setDate(correctedEnd.getDate() - 1);
        // 此时info.start到correctedEnd就是你实际选中的20-22日
        console.log('选中范围:', info.start.toISOString().split('T')[0], '至', correctedEnd.toISOString().split('T')[0]);
      }
    });
    calendar.render();
  });
  

• 事件数据传入时的调整：如果你的业务数据中结束日期是包含性的（比如事件截止到22日当天），传入FullCalendar时需要把end设为下一天，配合allDay: true属性，组件会正确渲染到22日：

  // 示例：构造正确的事件数据
  const events = [
    {
      title: '我的事件',
      start: '2023-11-20',
      end: '2023-11-23', // 传入下一天
      allDay: true
    }
  ];
  

• 检查自定义格式化逻辑：如果你配置了自定义的日期格式化函数，确认是否错误地直接使用了end日期而未做减1处理，比如在eventContent或selectConstraint等配置中。

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