FullCalendar v5 timeGridDay视图限制事件拖拽范围的实现方法

在timeGridDay视图里限制事件拖拽范围，不让其超出组件边界，有两种实用方案：

方案1：使用内置eventDragConstraint配置（推荐） #

FullCalendar提供了eventDragConstraint配置项，可以直接限定事件拖拽的时间范围，刚好匹配timeGridDay的当天视图边界，从根源上阻止事件拖出组件。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridDay',
    editable: true,
    // 约束拖拽只能在当天00:00-24:00范围内
    eventDragConstraint: {
      start: '00:00',
      end: '24:00',
      forceConstraint: true // 强制启用约束，忽略可能的例外设置
    },
    events: [
      { title: '测试事件', start: '2024-05-20T10:00:00', end: '2024-05-20T12:00:00' }
    ]
  });
  calendar.render();
});

该方案无需手动操作DOM，利用框架内置逻辑就能实现限制，稳定性和兼容性更好。

方案2：自定义拖拽事件监听（灵活适配特殊场景） #

如果内置配置无法满足自定义边界需求，可以通过监听拖拽相关事件，实时限制事件元素的位置：

示例代码：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridDay',
    editable: true,
    eventDragStart: function(info) {
      // 记录日历容器的边界坐标
      const rect = calendarEl.getBoundingClientRect();
      info.view.calendar.containerBounds = {
        top: rect.top,
        bottom: rect.bottom,
        left: rect.left,
        right: rect.right
      };
    },
    eventDrag: function(info) {
      const bounds = info.view.calendar.containerBounds;
      const dragEl = info.draggedEl;
      const dragRect = dragEl.getBoundingClientRect();

      // 限制顶部边界
      if (dragRect.top < bounds.top) {
        dragEl.style.top = `${bounds.top - dragRect.top + parseInt(dragEl.style.top || 0)}px`;
      }
      // 限制底部边界
      if (dragRect.bottom > bounds.bottom) {
        dragEl.style.top = `${bounds.bottom - dragRect.bottom + parseInt(dragEl.style.top || 0)}px`;
      }
      // 可选：限制左右边界（timeGridDay视图通常不需要，按需启用）
      // if (dragRect.left < bounds.left) {
      //   dragEl.style.left = `${bounds.left - dragRect.left + parseInt(dragEl.style.left || 0)}px`;
      // }
      // if (dragRect.right > bounds.right) {
      //   dragEl.style.left = `${bounds.right - dragRect.right + parseInt(dragEl.style.left || 0)}px`;
      // }
    },
    events: [
      { title: '测试事件', start: '2024-05-20T10:00:00', end: '2024-05-20T12:00:00' }
    ]
  });
  calendar.render();
});

该方案通过实时计算事件元素与容器的位置关系，强制调整元素样式，适合需要自定义边界规则的场景。

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