FullCalendar：在调整大小时获取新的开始/结束时间答案

【问题标题】：FullCalendar: get new start / end times while resizingFullCalendar：在调整大小时获取新的开始/结束时间
【发布时间】：2015-04-09 22:47:25
【问题描述】：

我已经尝试解决这个问题几个小时了，但我不知道如何解决。我有一个小弹出框，它在调整大小/拖动它时显示在 FullCalendar (fullcalendar.io) 事件旁边，我想在调整大小时立即在其中显示新的开始/结束时间，就像它显示在事件本身上一样（这意味着确认/调整更改弹出窗口）。我认为尝试使用此事件文本将是一种非常混乱的方法：

$('.fc-helper-skeleton .fc-time > span').text()

也许有人知道如何做到这一点。如果 FullCalendar 默认这样做，我认为在调整大小时应该有一种简单的方法来获取这些值？

如果我可以在调整大小时将值作为时刻对象获取，那就太好了。或者是否存在此功能不存在的性能原因？

【问题讨论】：

标签： jquery resize fullcalendar

【解决方案1】：

这不是直接支持的......但是有一个很好的方法。

我们利用 eventRender 和 start/stop drag/resize 回调。

eventRender: function( event, element, view ) {
    if(event.changing){ // If this event is being changed, grab its render date
        $("#currenttime").html("Start: "+event.start.format("YYYY-MM-DD hh:mma")+"<br> End: "+event.end.format("YYYY-MM-DD hh:mma"));
    }
},
eventResizeStart: function(event, jsEvent, ui, view ){
    // We can add properties to the event object
    event.changing = true; // Event is being changed
},
eventResizeEnd: function(event, jsEvent, ui, view ){
    event.changing = false; // Event is finished being changed
},
eventDragStart: function(event, jsEvent, ui, view ){
    event.changing = true;
},
eventDragEnd: function(event, jsEvent, ui, view ){
    event.changing = false;
},

JSFiddle

我无法想象这会不稳定的任何原因。而且它的扩展性很强，你可以从这里走向很多方向。

请注意，并非所有事件都有结束日期，因此请在使用前检查是否为空。

【讨论】：

非常感谢，这正是我想要的。它工作得很好，看起来很干净。
我认为事件已重命名：eventResizeEnd 到 eventResizeStop 和 eventDragEnd 到 eventDragStop。请参阅the documentation 了解更多信息。

【解决方案2】：

与v5 一样，render hooks methods 替换了用于已接受答案的eventRender。现在可以使用eventContent 方法来完成。

eventContent: function(arg) {
   if(info.isResizing || info.isDragging) {
      // Use arg.event.start and arg.event.end 
   }
}

您也可以使用此方法将 html 注入事件的视图 - 方法文档中提供了一个示例。

【讨论】：