只允许将事件拖到背景事件上

Question

我正在管理 fullcalendar 的约会。我有可用的时间段可以创建新的约会。我也可以将约会拖到显示为 background events.

的可用时间段

我只想要后台事件槽的掉落功能。

我试过 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 设置实现所需的功能。这允许您将事件拖动限制在特定的 windows 时间。如文档所述，您可以为此设置提供 groupId 值，然后

...events that are being dragged or resized must be fully contained by at least one of the events linked to by the given 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
  },

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

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

只允许将事件拖到背景事件上

Allow events to be dragged only onto background events

javascript

fullcalendar

momentjs

fullcalendar-4