Question

我正在管理fullcalendar上的约会。我有空闲的时间可以创建新约会。另外，我可以将约会拖到显示为后台事件的可用时隙上。

我只希望在后台事件位置放下放置功能。</ p>

我尝试了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

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

1 个答案: