[英]Avoid event superposition in FullCalendar
Hello I'm trying to avoid overlapping events in a FullCalendar
app. 您好,我正在尝试避免
FullCalendar
应用中的事件重叠。 I've defined the eventDrop
callback so it checks for any overlapping events, and moves the currently moved event to the end of the overlapping one by changing event.start
and event.end
accordingly, and then calling .fullCalendar('updateEvent', event)
. 我已经定义了
eventDrop
回调,以便它检查是否有任何重叠的事件,并通过相应地更改event.start
和event.end
,然后调用.fullCalendar('updateEvent', event)
。
This here is my code, the moment
call is for http://momentjs.com/docs/ which is a time handling facility library for javascript and I don't think is culplrit of the problem. 这是我的代码,
moment
调用是针对http://momentjs.com/docs/的 ,这是一个用于javascript的时间处理工具库,我认为这不是问题的罪魁祸首。 If I comment up the lines that do event.start = start; event.end = end
如果我注释掉行
event.start = start; event.end = end
event.start = start; event.end = end
, then all works normally. event.start = start; event.end = end
,然后一切正常。 If I don't, it breaks in exactly the same fashion, whether I call updateEvent
or not. 如果不这样做,无论是否调用
updateEvent
,它都会以完全相同的方式中断。 What happens is: the event DOES get moved to the end of the previous one, but if I try to move the event forwards later on (on to an empty space later that day) the previous event gets visually extended until the new beginning of the event currently being modified. 发生的情况是:事件确实移到了前一个事件的末尾,但是如果我尝试将事件移到以后的某个日期(当天晚些时候移至空白处),则前一个事件将在视觉上扩展到新的开始当前正在修改的事件。
self.collection
is a backbone collection, so calling this code with just the event.start=
bit commented shows the events overlapping, but if I refresh the page, then the events show in their right spots (not overlapping) 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()});
},
OK, found the issue. 好的,找到了问题。
the line that says 这行说
start = eend;
should be 应该
start = eend.clone();
because wrapping it in a moment
object doesn't do it, it just keeps a reference, and it sets the newly moved event's start
date to be the same Date
object as the overlap.end
因为将其包装在一个
moment
对象中并没有做,它只是保留了一个引用,并将新移动的事件的start
日期设置为与overlap.end
相同的Date
对象 overlap.end
you have another mistake, duration should be 您还有另一个错误,持续时间应为
var duration = end - start;
because in your approach it calculates the duration of the overlapping event, not the one that you just moved 因为在您的方法中,它计算重叠事件的持续时间,而不是您刚刚移动的事件的持续时间
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.