FullCalendar - 是否可以更改结束时间的位置？

Question

Answer 1

看代码，我找不到一个非常简单的方法来做到这一点。原因是，当您添加的结束时间将其添加到开始时间跨度，所以这里是我想出了一个解决方案：

$('#cal').fullCalendar({ 
    'events': test, 
    'timeFormat': 'H:mm - {H:mm}' 
}); 

$('.fc-event-time').each(function() { 
    var obj = $(this); 
    var parent = $(this).parent(); 
    var time = $(this).text(); 
    var start = time.split(' - ')[0]; 
    var finish = time.split(' - ')[1]; 
    obj.text(start); 
    parent.append('<span class="fc-event-time" style="float: right;">' + finish + '</span>'); 
}); 

See it working here

• 首先，添加'timeFormat'日历（我假设你已经拥有它要显示的完成时间），给次分离-（这将允许两次分裂）
  • 注意任何时间内{}将是结束时间。
• 接着得到jQuery来循环通过每个元件与类fc-event-time（其由fullCalendar加到时间）。
• 现在我们需要掌握时间的父母，以便稍后添加元素。
• 下获得的时间和分离的-（空间破折号空间）
• 现在设置的原始持有人有两个起点和终点所以它仅仅是个开始。
• 现在将另一个跨度元素添加到父级，这是事件的标题，但将其浮动到右侧并添加结束时间。

---

按justkt的意见，这让我想到，上面贴只会在页面加载时运行的方法，所以当你改变了看法，就不会再运行。
为了解决这个问题，加上当事件被渲染的回调：

$('#cal').fullCalendar({ 
    'events': test, 
    'eventRender' : renderEvents, 
    'timeFormat': 'H:mm - {H:mm}', 
}); 

function renderEvents(){ 
    $('.fc-event-time').each(function() { 
     var obj = $(this); 
     if (!obj.hasClass('finish-moved')) { 
      var parent = $(this).parent(); 
      var time = $(this).text(); 
      var start = time.split(' - ')[0]; 
      var finish = time.split(' - ')[1]; 
      obj.text(start); 
      parent.append('<span class="fc-event-time finish-moved" style="float: right;">' + finish + '</span>'); 
      obj.addClass('finish-moved'); 
     } 
    }); 
} 

See it working here

这需要多一点的逻辑添加到它，事件渲染似乎是要求每个事件，所以当完成时间跨度被添加，下一次循环运行它会尝试分割完成时间，所以停止添加类finish-moved，以便它不再受到影响。

---

另一个更新为每justkt“再次感言：

当回调被调用时会通过它影响的对象，这样你就可以‘上只是工作’，而不是运行多个循环：

$('#cal').fullCalendar({ 
    'events': test, 
    'eventRender': renderEvents, 
    'timeFormat': 'H:mm - {H:mm}', 
}); 

function renderEvents(e, a) { 
    var startObj = $(a).find('.fc-event-time'); 
    var time = $(startObj).text().split(' - '); 
    $(startObj).text(time[0]); 
    $(a).find('.fc-event-inner').append('<span class="fc-event-time" style="float: right;">' + time[1] + '</span>'); 
} 

See it working here

这是一个非常相似的校长，才刚刚运行在其上叫个事件e回调所以应该减少资源饥饿。