在AgendaDay視圖中更改fullcalendar的默認事件寬度

Question

當您查看fullcalendar上的agendaDay視圖時，事件佔據全屏。 （幾乎全滿，在滾動條旁邊有2.5％的截斷點，我認爲這是完全沒有必要的，我希望第一個事件佔用一半的時間，然後隨着更多的事件添加到同一個時間段，我會變得更小。有我看過這裏的答案沒有辦法做到這

： How to edit width of event in FullCalendar?

這裏： Edit width of event in FullCalendar

的兩個重新調整大小事件的工作，但他們曾經導致問題一堆事件添加在同一個插槽中，我需要能夠在一個插槽中放置至少10個事件，而不會重疊或使用css亞慶。

這可能嗎？

Answer 1

我一直在尋找這一段時間，首先確保你有slotEventOverlap設置爲false。我的解決辦法是在eventAfterRender回調下面的代碼：

eventAfterRender: function(event, element, view) 
{ 
    if (view.name == "agendaDay") 
    { 
     var width = $(element).width(); 
     width = (width/4) * numEvents(event.start); // Where 4 is the maximum events allowed at that time. 
     $(element).css('width', width + 'px'); 
    } 
} 

的numEvents函數返回多少事件是在那個時候：

function numEvents(date) 
{ 

    totalEvents = $('#calendar').fullCalendar('clientEvents').length; 

    var count = 0; 

    for (i = 0; i < totalEvents; i++) 
    { 
     if ($('#calendar').fullCalendar('clientEvents')[i].start.getTime() == date.getTime()) 
     { 
      count++; 
     } 
    } 

    return count; 
} 

希望這是有些用處！