点击跨多时间段的日程事件时，如何获取点击对应的底层时间段？

下面提供两种实用的实现方案，不需要复杂的CSS类或手动像素计算：

方案1：用FullCalendar内置的坐标转日期方法 #

FullCalendar本身提供了getDateFromPoint方法，能直接把点击的屏幕坐标转换成对应的日历日期时间，完美适配你的需求。

在eventClick钩子中，利用事件对象的坐标参数调用这个方法即可：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的日历配置项（比如视图、事件源等）
    eventClick: function(info) {
      // 提取点击位置的屏幕坐标
      const { clientX, clientY } = info.jsEvent;
      // 调用日历实例的方法，获取对应底层时段的日期
      const targetDateTime = calendar.getDateFromPoint(clientX, clientY);
      
      // 这里就可以用targetDateTime作为新事件的起始/结束时间了
      console.log('点击对应的底层时段:', targetDateTime);
      // 后续添加新事件的逻辑...
    }
  });
  calendar.render();
});

这个方法是库原生支持的，不需要自己处理视图差异，兼容性和准确性都有保障。

方案2：给时段单元格添加自定义数据属性 #

如果需要更灵活的时段信息（比如整个时段的起止），可以在日历渲染时给每个时段单元格加上日期数据属性，点击事件时通过DOM查找获取。

1. 先在日历的datesRender钩子中给时段单元格添加data-date：

datesRender: function(info) {
  // 根据你使用的视图选择对应的单元格类名，这里覆盖月视图和时间线视图
  const cellSelectors = '.fc-daygrid-day, .fc-timegrid-slot';
  info.el.querySelectorAll(cellSelectors).forEach(cell => {
    // 获取单元格对应的日期
    const cellDate = info.view.calendar.getDateFromPoint(
      cell.getBoundingClientRect().left,
      cell.getBoundingClientRect().top
    );
    // 把日期转成ISO字符串存在属性里
    cell.setAttribute('data-date', cellDate.toISOString());
  });
}

2. 然后在eventClick中查找底层的时段单元格，读取日期：

eventClick: function(info) {
  // 向上查找最近的带data-date属性的单元格
  const targetCell = info.jsEvent.target.closest('[data-date]');
  if (targetCell) {
    const targetDateTime = new Date(targetCell.getAttribute('data-date'));
    console.log('点击的底层时段:', targetDateTime);
    // 处理新事件创建逻辑...
  }
}

额外提示 #

• 可以通过info.view.calendar在钩子中获取日历实例，不用全局变量
• 不同视图的单元格类名可能有差异，比如日视图的时段是.fc-timegrid-slot，月视图是.fc-daygrid-day，按需调整选择器即可

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