FullCalendar中拖拽事件至Business Hours区域是否符合预期？

问题解答 #

1. 从资源拖拽事件到Business Hours灰色区域，系统允许操作是否符合预期？
   是的，这符合FullCalendar的默认预期行为。默认配置下，businessHours仅作为视觉高亮标识，用来区分工作时段和非工作时段，并不会限制事件的拖拽放置操作。除非主动配置限制规则，否则系统不会阻止将事件放到该区域。

2. 日历内拖拽调整事件时间段时，可放置到Business Hours区域是否合理？
   默认情况下是合理的，因为FullCalendar默认不强制限制事件必须在工作时段内。很多场景下用户可能需要在工作时段外安排事件（比如加班、预约），所以默认开放拖拽权限是通用设计。如果需要限制事件只能在工作时段内，可通过配置开启约束规则。

实现限制拖拽到工作时段外的修改方案 #

如果需要禁止将事件拖拽到工作时段外，只需在日历配置中添加eventConstraint: "businessHours"参数，修改后的JavaScript代码如下：

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: "UTC",
    initialView: "resourceTimelineDay",
    aspectRatio: 1.5,
    headerToolbar: {
      left: "prev,next",
      center: "title",
      right: "resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth"
    },
    editable: true,
    resourceAreaHeaderContent: "Rooms",
    businessHours: {
      daysOfWeek: [1, 2, 3, 4], // 周一至周四
      startTime: "12:00",
      endTime: "18:00"
    },
    eventConstraint: "businessHours", // 添加此参数限制事件只能在工作时段内拖拽
    resources: [
      { id: "a", title: "Resource A" },
      { id: "b", title: "Resource B" }
    ],
    events: [
      { title: "Event 2", start: "2023-11-10", resourceId: "a" },
      { title: "Event 3", start: "2023-11-10", resourceId: "b" }
    ]
  });

  calendar.render();
});

添加该配置后，事件将无法被拖拽到工作时段之外的区域，同时也不能从工作时段外拖拽进来。

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