FullCalendar事件调整大小

Question

您好Stackoverflow，

我在FullCalendar中使用外部拖放功能。我有一种情况，我有两种不同类型的事件，我想计算一下，如果用户将事件从一天重新调整到一天中的任何事件，使用拖放操作来计算它调整了多少天。

这里是我的js代码

$(document).ready(function() { 


/* initialize the external events 
-----------------------------------------------------------------*/ 

$('#external-events div.external-event').each(function() { 

//Do a check to see which class was select and assign bg color with the color of that resource 
if($(this).text() == "Birthday"){ 
    bgColor = '#3A87AD' 
} 
else if($(this).text() == "Holiday"){ 
    bgColor = '#A53333' 
} 
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) 
// it doesn't need to have a start or end 
var eventObject = { 
title: $.trim($(this).text()), // use the element's text as the event title 
backgroundColor: bgColor 
}; 

// store the Event Object in the DOM element so we can get to it later 
$(this).data('eventObject', eventObject); 

// make the event draggable using jQuery UI 
$(this).draggable({ 
    zIndex: 999, 
revert: true,  // will cause the event to go back to its 
revertDuration: 0 // original position after the drag 
}); 

}); 


/* initialize the calendar 
-----------------------------------------------------------------*/ 

$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     right: 'title' 
    }, 
    editable: true, 
droppable: true, // this allows things to be dropped onto the calendar !!! 
drop: function(date, allDay) { // this function is called when something is dropped 

//Minus vacation days 
$('#vacation_days').text($('#vacation_days').text() - 1); 

// retrieve the dropped element's stored Event Object 
var originalEventObject = $(this).data('eventObject'); 

// we need to copy it, so that multiple events don't have a reference to the same object 
var copiedEventObject = $.extend({}, originalEventObject); 

// assign it the date that was reported 
copiedEventObject.start = date; 
copiedEventObject.allDay = allDay; 

// render the event on the calendar 
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

// is the "remove after drop" checkbox checked? 
if ($('#drop-remove').is(':checked')) { 
// if so, remove the element from the "Draggable Events" list 
$(this).remove(); 
} 

} 
}); 


}); 

Answer 1

可以使用eventResize事件FullCalendar的，那就是：

调整停止时触发，事件持续时间已经改变

代码：

eventResize: function (event, dayDelta, minuteDelta, revertFunc) { 

    alert(
     "The end date of " + event.title + "has been moved " + dayDelta + " days and " + minuteDelta + " minutes."); 

    if (!confirm("is this okay?")) { 
     revertFunc(); 
    } 

} 

工作演示：