Question

我现在已经尝试解决这个问题几个小时，但我无法弄清楚如何解决这个问题。我有一个小的popover，它显示在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：在调整大小时获得新的开始/结束时间

2 个答案: