Javascript 完整日历-如何禁用拖动以反转背景事件

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

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

我该如何扭转这种局面

我的一些代码：

我的一系列可用课程：

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}
      />

let avail=[
{
groupId:“课程可用”，
开始：“2021-01-13T10:00:00”，
结束：“2021-01-13T16:00:00”，
颜色：“ccc”，
显示：“反向背景”，
},
{
groupId:“课程可用”，
开始：“2021-01-14T16:00:00”，
结束：“2021-01-14T19:00:00”，
颜色：“ccc”，
显示：“反向背景”，
},
{
groupId:“课程可用”，
开始：“2021-01-15T16:00:00”，
结束：“2021-01-15T19:00:00”，
显示：“反向背景”，
颜色：“ccc”，
},
{
groupId:“课程可用”，
开始：“2021-01-16T16:00:00”，
结束：“2021-01-17T19:00:00”，
显示：“反向背景”，
颜色：“ccc”，
},
];
-------------------------------------------------------

未着色的位

#ccc

是事件所在的区域。所以你不能拖到活动上。这就是您告诉代码对

eventOverlap

设置所做的操作-即不允许拖到现有事件上。事实上，你还告诉它反转背景颜色是不相关的-这只是一个视觉细节

您可以使用

eventConstraint

来代替

eventOverlap

——它允许您指定一个

groupId

，指示可以删除事件的事件。然后确保它们不会被扔到其他任何地方。因为您已经为您的后台事件定义了groupId，所以这变得很简单：

eventConstraint: "lesson-available"

（在React组件语法中，我想应该是

eventOverlap=“lesson available”

）

文件：

演示：

FullCalendar组件中的“eventOverlap={false}”会导致所有非“#ccc”的区域都不可拆分