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回調所以應該減少資源飢餓。