Javascript 只允许将事件拖到后台事件上

我正在管理

fullcalendar

上的约会。我有可以创建新约会的可用时间段。我还可以将约会拖到可用的时间段上，这些时间段显示为背景事件

我只想在后台事件插槽上使用drop功能

我尝试了

eventOverlap

方法，但它仅在将事件放在后台事件上时有效。如果事件被丢弃在其他位置，则我无法检测是否将事件丢弃在后台事件或空插槽中

var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    defaultView: 'timeGridWeek',
    // height: 1080,
    plugins: ['dayGrid', 'timeGrid', 'interaction'],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },

    events: {
        url: getUrl(),
        failure: function() {
            toastr.error('Unable to load calendar data, Please try later');
        },
        success: function() {

        }
    },


    loading: function(bool) {

    },
    defaultDate: Date.now(),

    editable: true,
    eventLimit: true,
    eventClick: function(info) {

        if (info.event.extendedProps.type == 'Calendar') {
            showCreateModal(info.event);
        }
        if (info.event.extendedProps.type == "Appointment") {
            showUpdateModal(info.event);
        }
    },

    eventOverlap: function(stillEvent, movingEvent) {
        return stillEvent.extendedProps != '' && stillEvent.extendedProps.type === 'Calendar' ? true : false;
    },

    eventDrop: function(info) {
        // check if event is being dropped on past date / slot
        if (moment(info.event.start) < moment()) {
            info.revert();
            return;
        }

        // check if event is being dropped on future slot
        if (moment(info.event.start) > moment()) {
            swal({
                    title: "Are you sure?",
                    text: "You are about to re-schedule this appointment!",
                    icon: "warning",
                    // buttons: true,
                    buttons: ["No", "Yes !"],
                    dangerMode: true,
                })
                .then((response) => {
                    if (response) {
                        submitForm(false, true, info.event);
                    } else {
                        info.revert();
                    }
                });
        }

    }

});

calendar.render();

var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
defaultView:“timeGridWeek”，
//身高：1080，
插件：['dayGrid'，'timeGrid'，'interaction']，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay”
},
活动：{
url:getUrl（），
失败：函数（）{
toastr.error（'无法加载日历数据，请稍后再试'）；
},
成功：函数（）{
}
},
加载：函数（bool）{
},
defaultDate:Date.now（），
是的，
eventLimit：对，
事件单击：函数（信息）{
如果（info.event.extendedProps.type=='Calendar'）{
ShowCreateModel（信息事件）；
}
if（info.event.extendedProps.type==“约会”）{
showUpdateModel（信息事件）；
}
},
eventOverlap：函数（stillEvent、movingEvent）{
返回stillEvent.extendedProps！=''&&stillEvent.extendedProps.type==='Calendar'？true:false；
},
eventDrop:函数（信息）{
//检查是否在过去的日期/时段删除事件
if（瞬间（信息事件开始）矩（））{
游泳({
标题：“你确定吗？”，
文本：“您将要重新安排此约会！”，
图标：“警告”，
//按钮：是的，
按钮：[“否”、“是！”]，
丹格莫德：没错，
})
。然后（（响应）=>{
如果（答复）{
提交表单（假、真、信息事件）；
}否则{
info.revert（）；
}
});
}
}
});
calendar.render（）；

这就是我想要的：

---

您认为

eventOverlap

在这里对您没有帮助，这是正确的，因为它仅在将事件放到后台事件时触发。当事件被放到其他地方时，它对您没有帮助

在fullCalendar 4中，您可以通过设置实现所需。这允许您将事件拖动限制到特定的时间窗口。如文档所述，您可以为此设置提供

groupId

值，然后

…正在拖动或调整大小的事件必须至少由给定的

groupId

链接的一个事件完全包含

您所需要做的就是为所有背景事件提供相同的groupId

例如，如果设置：

eventConstraint: 1

然后在事件数据中包含以下条目：

  {
    start: "2019-07-10 09:00",
    end: "2019-07-10 12:00",
    rendering: "background",
    groupId: 1
  },
  {
    start: "2019-07-11 09:00",
    end: "2019-07-11 12:00",
    rendering: "background",
    groupId: 1
  },

这意味着，如果拖动/调整现有日历事件的大小，使其完全在groupId为1的背景事件所涵盖的时间段内，则只允许拖动或调整其大小

---

这里有一个有效的演示：

我已经通过eventConstraint解决了这个问题。另外，为了更新数据库中的值，如果我在正确的日期删除事件，我已经在chehck中添加了一些额外的php签入