Question

您好我正在尝试避免FullCalendar应用中的重叠事件。我已经定义了eventDrop回调，因此它检查了任何重叠事件，并通过相应地更改event.start和event.end，然后调用，将当前移动的事件移动到重叠事件的末尾.fullCalendar('updateEvent', event)。

这是我的代码，moment调用是http://momentjs.com/docs/，这是javascript的时间处理设施库，我不认为是问题的原因。如果我评论event.start = start; event.end = end的行，那么一切正常。如果我不这样做，它会以完全相同的方式打破，无论我是否打电话给updateEvent。会发生的事情是：事件将被移动到前一个事件的末尾，但是如果我稍后尝试向前移动事件（当天晚些时候转到空白区域），则先前的事件会在视觉上延长，直到新的开始。目前正在修改的事件。

self.collection是一个骨干集合，因此仅使用event.start=位注释调用此代码会显示事件重叠，但如果我刷新页面，则事件会显示在正确的位置（不重叠））

eventDrop: function(event, dayDelta,
                    minuteDelta, allDay,
                    revertFunc, jsEvent, ui, view) {
    var start = moment(event.start);
    var end = moment(event.end);
    var overlap = self.calendar.fullCalendar('clientEvents', function(ev) {
        if( ev == event)
            return false;
        var estart = moment(ev.start);
        var eend = moment(ev.end);
        return estart.unix() < end.unix() && eend.unix() > start.unix();
    });
    if( overlap.length ) {
        overlap = overlap[0];
        var estart = moment(overlap.start);
        var eend = moment(overlap.end);
        var duration = eend - estart;
        start = eend;
        end = start.clone();
        end.add(duration);
        event.start = start.toDate();
        event.end = end.toDate();
        self.calendar.fullCalendar('updateEvent', event);
    }
    event.model.save({start: start.unix(), end: end.unix()});
},

Answer 1

好的，找到了问题。

表示

的行

start = eend;

应该是

start = eend.clone();

因为将它包装在moment对象中并不会这样做，所以只保留一个引用，并将新移动的事件的start日期设置为相同{ {1}} 对象作为Date

Answer 2

你有另一个错误，持续时间应该是

var duration = end - start;

因为在你的方法中它计算重叠事件的持续时间，而不是你刚刚移动的事件的持续时间

避免在FullCalendar中进行事件叠加

2 个答案: