有没有办法防止 jQuery FullCalendar 中的重叠事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2369683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to prevent overlapping events in jQuery FullCalendar?
提问by user267637
Is there a way to prevent overlapping events in jQuery FullCalendar?
有没有办法防止 jQuery FullCalendar 中的重叠事件？
回答by ecruz
I made a function that checks whether the given event is overlapping other or not. Returns true if the event is overlapping other and false otherwise.
我做了一个函数来检查给定的事件是否与其他事件重叠。如果事件与 other 重叠，则返回 true，否则返回 false。
function isOverlapping(event){
var array = calendar.fullCalendar('clientEvents');
for(i in array){
if(array[i].id != event.id){
if(!(Date(array[i].start) >= Date(event.end) || Date(array[i].end) <= Date(event.start))){
return true;
}
}
}
return false;
}
You can use it when dropping or resizing and event and if the event overlaps other use the revertFunc that is received in the eventDrop and eventResize callbacks or cancel the creation of an event in the select callback. In order to use it in the select callback create a dummie event:
您可以在删除或调整大小和事件时使用它，如果事件与其他事件重叠，则使用在 eventDrop 和 eventResize 回调中接收到的 revertFunc 或取消在选择回调中创建事件。为了在选择回调中使用它，请创建一个虚拟事件：
var event = new Object();
event.start = start;
event.end = end;
回答by inN0Cent
As of version 2.20 this change has been incorporated by default...
从 2.20 版开始，默认情况下已包含此更改...
use
用
eventOverlap: false
事件重叠：假
回答by Matthew Webb
Same as ecruz's answer but with logic that worked better for me.
与 ecruz 的答案相同，但逻辑对我来说效果更好。
function isOverlapping(event){
// "calendar" on line below should ref the element on which fc has been called
var array = calendar.fullCalendar('clientEvents');
for(i in array){
if (event.end >= array[i].start && event.start <= array[i].end){
return true;
}
}
return false;
}
回答by PrestonDocks
Just add
只需添加
eventOverlap: false
as one of your options outside of the events element.
作为事件元素之外的选项之一。
You can also add the option
您还可以添加选项
overlap
to a single event, which will override the eventOverlap on that single event.
到单个事件，这将覆盖该单个事件上的 eventOverlap。
events: [
{
title : 'event1',
start : '2017-05-27'
},
{
title : 'event2',
start : '2017-05-28',
end : '2017-05-29'
},
{
title : 'event3',
start : '2017-05-30T12:30:00',
allDay : false, // will make the time show
draggable: true,
editable: true,
overlap: true,
},
{
title : 'event3',
start : '2017-05-30T09:30:00',
allDay : false, // will make the time show
draggable: true,
editable: true,
}
],
eventOverlap: false
回答by Div Tiwari
Same as Matthew Webb but Following worked for me since sometimes my end date was null when i was dragging the event from allDay to some time slot
与 Matthew Webb 相同，但 Follow 对我有用，因为有时当我将事件从 allDay 拖到某个时间段时，我的结束日期为空
function isOverlapping(event) {
var arrCalEvents = $('#' + g_str_FullCalenderID).fullCalendar('clientEvents');
for (i in arrCalEvents) {
if (arrCalEvents[i].id != event.id) {
if ((event.end >= arrCalEvents[i].start && event.start <= arrCalEvents[i].end) || (event.end == null && (event.start >= arrCalEvents[i].start && event.start <= arrCalEvents[i].end))) {//!(Date(arrCalEvents[i].start) >= Date(event.end) || Date(arrCalEvents[i].end) <= Date(event.start))
return true;
}
}
}
return false;
}
回答by Luís Ponciano
I'm using version 2.11 of Fullcalendar and i made some change to code posted by ecruz:
我正在使用 Fullcalendar 的 2.11 版，并对 ecruz 发布的代码进行了一些更改：
function isOverlapping(event){
var array = calendar.fullCalendar('clientEvents');
for(i in array){
if(array[i]._id != event._id){
if(!(array[i].start.format() >= event.end.format() || array[i].end.format() <= event.start.format())){
return true;
}
}
}
return false;
}
and this is how i use to prevent the overlap:
这就是我用来防止重叠的方法：
$('#calendar').fullCalendar({
...
eventDrop: function(event, delta, revertFunc) {
if (isOverlapping(event)) {
revertFunc();
}
},
...
});
回答by SuperUser
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
var start = new Date(event.start);
var end = new Date(event.end);
var events = event.source.events;
for (var i = 0; i < events.length; i++) {
var someEvent = events[i];
if (someEvent._id == event._id)
{
continue;
}
var seStart = new Date(someEvent.start);
var seEnd = new Date(someEvent.end);
if ((start < seEnd) && (seStart < end)) {// dates overlap
revertFunc();
}
}
},
回答by Leo Barbas
just try this, works fine for me.... https://fullcalendar.io/docs/event_ui/eventOverlap/
试试这个，对我来说很好用...... https://fullcalendar.io/docs/event_ui/eventOverlap/
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.allDay && movingEvent.allDay;
}
回答by RedaZZ
Try this:
尝试这个：
$('#calendar').fullCalendar({slotEventOverlap : false});
$('#calendar').fullCalendar({slotEventOverlap : false});
As per the documentation.
根据文档。
回答by Eggie
allowCalEventOverlap: [boolean | default: false] – Whether the calendar will allow events to overlap. Events will be moved or resized if necessary if they are dragged or resized to a location that overlaps another calendar event.
allowCalEventOverlap: [布尔值 | 默认值：false] – 日历是否允许事件重叠。如果事件被拖动或调整到与另一个日历事件重叠的位置，则将在必要时移动事件或调整其大小。
is that what you were looking for?
这就是你要找的吗？
