完整日历:在调整大小时获取新的开始/结束时间

Question

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

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

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

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

Answer 1

和v5一样，渲染钩子方法取代了eventRender用于接受的答案。现在可以使用 eventContent 方法完成此操作。

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

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

Answer 2

这不直接支持...但是有一个很好的方法可以做到这一点。

我们利用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

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

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