jQuery FullCalendarでイベントの重複を防ぐ方法はありますか?
11 に答える
与えられたイベントが他のイベントと重なっているかどうかをチェックする関数を作りました。イベントが他のイベントとオーバーラップしている場合は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;
}
これは、イベントのドロップまたはサイズ変更時に使用できます。イベントが他のイベントと重複する場合は、eventDropおよびeventResizeコールバックで受信したrevertFuncを使用するか、selectコールバックでのイベントの作成をキャンセルします。selectコールバックで使用するには、ダミーイベントを作成します。
var event = new Object();
event.start = start;
event.end = end;
バージョン 2.20 以降、この変更はデフォルトで組み込まれています...
使用する
イベントオーバーラップ: false
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;
}
Matthew Webb と同じですが、イベントを allDay から特定のタイムスロットにドラッグすると、終了日が null になることがあったため、次の方法でうまくいきました。
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;
}
これを試してみてください。私にとってはうまくいきます.... https://fullcalendar.io/docs/event_ui/eventOverlap/
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.allDay && movingEvent.allDay;
}
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();
}
}
},
私は 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;
}
そして、これは私がオーバーラップを防ぐために使用する方法です:
$('#calendar').fullCalendar({
...
eventDrop: function(event, delta, revertFunc) {
if (isOverlapping(event)) {
revertFunc();
}
},
...
});
このように書いてください。
$('#calendar').fullCalendar({
selectOverlap: false,
eventOverlap:false,
})
SelectOverlap は、重複するイベントを作成するときに重複を防ぎます。
EventOverlap は、イベントのオーバーラップをドラッグ ドロップする際のオーバーラップを防ぎます。
allowCalEventOverlap: [ブール値 | デフォルト: false] – カレンダーがイベントの重複を許可するかどうか。別のカレンダー イベントと重なる場所にイベントをドラッグまたはサイズ変更すると、必要に応じてイベントが移動またはサイズ変更されます。
それはあなたが探していたものですか?