嘿，我来帮你搞定这个FullCalendar的痛点～针对你的两个问题，我整理了具体的解决方案：

一、将Y坐标转换为TimeGrid对应的时间 #

其实FullCalendar的View对象提供了足够的信息来完成坐标到时间的转换，核心思路是利用视图的时间范围和时间格子的布局来计算。以下是具体步骤和代码示例：

1. 首先获取TimeGrid视图的时间区域容器，你可以通过view.el找到对应的元素，比如TimeGrid的时间槽容器通常有.fc-time-grid-slots类；
2. 计算点击位置相对于时间容器的垂直偏移量（需要减去容器的顶部偏移和滚动距离）；
3. 结合视图的起始时间（view.activeStart）和结束时间（view.activeEnd），以及时间容器的总高度，算出偏移量对应的时间比例，最终得到具体时间。

代码示例：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid'],
    defaultView: 'timeGridDay',
    eventClick: function(info) {
      // 获取时间槽容器
      var timeSlotsEl = info.view.el.querySelector('.fc-time-grid-slots');
      if (!timeSlotsEl) return;

      // 计算点击位置相对于时间槽的垂直偏移
      const rect = timeSlotsEl.getBoundingClientRect();
      const scrollTop = info.view.el.querySelector('.fc-scroller').scrollTop;
      const yOffset = info.jsEvent.clientY - rect.top + scrollTop;
      const totalHeight = timeSlotsEl.offsetHeight;

      // 获取视图的时间范围
      const startMs = info.view.activeStart.getTime();
      const endMs = info.view.activeEnd.getTime();
      const totalMs = endMs - startMs;

      // 计算点击对应的时间戳
      const clickTimeMs = startMs + (yOffset / totalHeight) * totalMs;
      const clickDate = new Date(clickTimeMs);

      // 输出结果，比如格式化为HH:mm
      console.log('点击的具体时间:', clickDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}));
    }
  });
  calendar.render();
});

需要注意：不同的TimeGrid视图（比如timeGridWeek）布局可能略有差异，但核心逻辑是一致的——通过垂直偏移占总高度的比例，映射到时间范围的比例。

二、点击Event内部时触发dateClick事件 #

默认情况下，FullCalendar的eventClick会阻止事件冒泡，所以点击Event元素时不会触发dateClick。不过有两种方式可以实现类似效果：

方式1：在eventClick中手动调用dateClick的处理逻辑 #

如果你已经有了dateClick的处理函数，可以直接在eventClick中复用它，模拟dateClickInfo参数：

function handleDateClick(info) {
  console.log('点击的时间:', info.date);
}

var calendar = new FullCalendar.Calendar(calendarEl, {
  // ...其他配置
  dateClick: handleDateClick,
  eventClick: function(info) {
    // 先通过坐标转换得到点击时间（参考第一部分的方法）
    const clickDate = ...; // 这里是你计算出的具体时间
    // 模拟dateClickInfo参数并调用处理函数
    handleDateClick({
      date: clickDate,
      jsEvent: info.jsEvent,
      view: info.view
    });
  }
});

方式2：修改Event元素的事件冒泡行为 #

可以通过自定义Event的渲染钩子，调整事件传播逻辑，但这种方式要谨慎，可能会引发其他交互冲突：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // ...其他配置
  eventRender: function(info) {
    info.el.addEventListener('click', function(e) {
      e.stopImmediatePropagation(); // 阻止FullCalendar的默认eventClick处理
      // 先计算点击时间（参考第一部分方法）
      const clickDate = ...;
      // 手动触发dateClick逻辑
      handleDateClick({date: clickDate, jsEvent: e, view: info.view});
    }, true); // 使用捕获阶段监听
  }
});

其他替代方案 #

如果你的场景允许，还可以考虑：

• 给Event启用可编辑功能（比如eventResize或eventDrag），但这更适合调整事件时间，而非单纯获取点击时间；
• 自定义Event的HTML结构，在内部添加带时间标记的可点击元素，但这种方式灵活性较低，不如坐标转换通用。

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