Full Calendar REACT JS - 如何禁用拖动到反向背景事件

Question

我目前正在创建一个使用完整日历和 React 的预订系统。

拖动课程（活动）时，所有不可用的预订时间都显示为灰色，但由于某些原因，我仍然可以将活动拖到那些插槽上，但是对于白色区域，我无法拖.

我该如何扭转它？

Image of my timetable

我的一些代码：

我的一系列可用课程：

let avail = [
{
  groupId: "lesson-available",
  start: "2021-01-13T10:00:00",
  end: "2021-01-13T16:00:00",
  color: "#ccc",
  display: "inverse-background",
},
{
  groupId: "lesson-available",
  start: "2021-01-14T16:00:00",
  end: "2021-01-14T19:00:00",
  color: "#ccc",
  display: "inverse-background",
},
{
  groupId: "lesson-available",
  start: "2021-01-15T16:00:00",
  end: "2021-01-15T19:00:00",
  display: "inverse-background",
  color: "#ccc",
},
{
  groupId: "lesson-available",
  start: "2021-01-16T16:00:00",
  end: "2021-01-17T19:00:00",
  display: "inverse-background",
  color: "#ccc",
},
];


-------------------------------------------------------

<FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        headerToolbar={{
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay",
        }}
        initialView="timeGridWeek"
        editable={true}
        eventColor="#6DCBCA"
        selectable={false} // Allows a user to highlight multiple days or timeslots by clicking and dragging.
        selectMirror={true}
        dayMaxEvents={true}
        weekends={true}
        events={currentEvents}
        select={handleDateSelect}
        eventContent={renderEventContent}
        eventClick={handleEventClick}
        eventDrop={handleEventDrop}
        eventDragStart={handleEventDragStart}
        eventDragStop={handleEventDragStop}
        eventOverlap={false}
      />

Answer 1

没有颜色的位#ccc是事件所在的区域。所以你不能拖到事件上。这就是您告诉代码如何处理 eventOverlap 设置 - 即不允许拖到现有事件上。您还告诉它反转背景颜色这一事实无关紧要 - 这只是一个视觉细节。

您可以代替 eventOverlap 做的是使用 eventConstraint - 它允许您指定 groupId 指示事件可能会被丢弃。然后它确保它们不会被丢弃在其他任何地方。由于您已经为后台事件定义了 groupId，因此这变得微不足道：

eventConstraint: "lesson-available"

（在 React Component 语法中，我认为这将是 eventOverlap="lesson-available"。）

文档：https://fullcalendar.io/docs/eventConstraint

演示：https://codepen.io/ADyson82/pen/mdrGqoz

Full Calendar REACT JS - 如何禁用拖动到反向背景事件

Full Calendar REACT JS - How to disable dragging to inverse-background events

javascript

reactjs

fullcalendar

fullcalendar-5