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

Question

我正在管理fullcalendar 上的约会。我有空闲时间可以创建新约会。我还可以将约会拖到显示为背景事件的可用时间段上。

我只想要后台事件槽上的拖放功能。

我已经尝试过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();

这就是我想要的：

Answer 1

您说得对，eventOverlap 在这里对您没有帮助，因为它仅在将事件拖放到后台事件时触发。当事件被丢弃在其他地方时，它对您没有帮助。

在 fullCalendar 4 中，您可以通过 eventConstraint 设置实现您所需要的。这允许您将事件拖动限制到特定的时间窗口。正如文档所说，您可以为此设置提供 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 的背景事件所涵盖的时间段内时，您才被允许拖动或调整其大小。

这是一个工作演示：https://codepen.io/ADyson82/pen/jjdEjB