FullCalendar JS：点击事件内网格时获取日期的技术问询

我之前做重复事件例外功能时，也碰到过一模一样的痛点——dayClick在事件覆盖的区域完全触发不了，eventClick又只返回整个事件的信息，拿不到具体点击的那一天。给你两个亲测有效的方案：

方案一：利用eventClick结合getDateFromPoint方法（最推荐） #

FullCalendar自带的getDateFromPoint(x, y)方法，可以通过鼠标点击的坐标直接定位到对应的日历日期。刚好eventClick的回调参数里有原生jsEvent对象，能拿到点击的精准坐标，完美适配你的需求。

代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('your-calendar-id');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的日历基础配置（视图、事件源等）
    eventClick: function(info) {
      // 通过点击坐标获取精准日期
      const clickedDate = calendar.getDateFromPoint(info.jsEvent.clientX, info.jsEvent.clientY);
      // 转成YYYY-MM-DD格式方便后续接口调用
      const targetDate = clickedDate.toISOString().split('T')[0];
      
      console.log('你点击的事件内日期:', targetDate);
      // 这里直接调用你的AJAX接口，创建关联原事件的EventException即可
      // 比如: createEventException(info.event.id, targetDate)
    }
  });
  calendar.render();
});

这个方法的优势是适配所有视图（月/周/日视图通用），不管事件跨多少天，都能精准拿到点击的那一天，完全匹配你给长事件设置例外日的场景。

方案二：自定义事件日期单元格的点击事件（适合复杂自定义场景） #

如果你的日历有大量自定义样式，担心坐标方法出现偏差，还可以手动给事件对应的每个日期单元格绑定点击事件。不过要注意每次视图切换（比如翻月）都要重新绑定，所以用datesRender回调来确保渲染完成后绑定：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('your-calendar-id');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    datesRender: function(info) {
      // 遍历所有事件元素
      info.el.querySelectorAll('.fc-event').forEach(eventEl => {
        // 给事件元素绑定点击事件
        eventEl.addEventListener('click', function(e) {
          // 同样用坐标法获取日期
          const clickedDate = calendar.getDateFromPoint(e.clientX, e.clientY);
          const targetDate = clickedDate.toISOString().split('T')[0];
          console.log('点击的日期:', targetDate);
        });
      });
    }
  });
  calendar.render();
});

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