Fullcalendar Scheduler 6.1.8中allDaySlot点击无法触发select事件求助

FullCalendar 6.x系列调整了allDaySlot的交互逻辑，默认不再触发select事件，以下是两种可行的恢复方案：

方案一：通过selectAllow配置开放权限 #

确保日历核心配置中selectable为true，再通过selectAllow回调明确允许allDay时段的选择：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    selectable: true, // 必须开启基础选择权限
    selectAllow: (selectInfo) => {
      // 允许allDay时段触发select事件
      return selectInfo.allDay;
    },
    select: (info) => {
      // 你的自定义处理逻辑
      console.log('选中allDay时段:', info.startStr, info.endStr);
    },
    allDaySlot: true,
    initialView: 'resourceTimelineDay'
    // 其他日历配置项...
  });
  calendar.render();
});

方案二：手动监听DOM事件模拟select触发 #

如果方案一不满足需求，可以直接监听allDaySlot区域的点击事件，手动触发select逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    allDaySlot: true,
    initialView: 'resourceTimelineDay'
    // 其他日历配置项...
  });
  calendar.render();

  // 监听allDaySlot区域点击
  calendarEl.addEventListener('click', (e) => {
    const allDaySlotEl = e.target.closest('.fc-all-day');
    if (allDaySlotEl) {
      const dayEl = allDaySlotEl.closest('.fc-daygrid-day');
      const dateStr = dayEl.dataset.date;
      const start = new Date(dateStr);
      const end = new Date(dateStr);
      end.setDate(end.getDate() + 1);

      // 手动触发select事件
      calendar.fireEvent('select', {
        start,
        end,
        allDay: true
      });
    }
  });
});

说明 #

6.x版本默认禁用allDaySlot的select触发，是为了区分allDay区域与常规时段的交互逻辑，上述方案可按需恢复旧版本的点击触发行为。

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