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

Question

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

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

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

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

Answer 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

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

请注意，并非所有活动都有结束日期，因此请在使用前进行空检查。

Answer 2

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

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

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

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

FullCalendar: get new start / end times while resizing

jquery

resize

fullcalendar