Fullcalendar.io: how to display one event per line in agendaWeek then mix all in one?

Question

I use Fullcalendar.io v2

In my agendaWeek mod I have events and all of them are displayed on one line in day square. So, more events I have, then thiner

Answer 1

I also faced the same issue and while Alexander's answer is great, i had performance issues with it as it does lot of DOM manipulation. I have about 2000-3000 events per week and became unusable in browsers like Firefox, IE etc. Therefore adapting Alexander's answer and minimizing DOM manipulation came up with following solution.

variables

var itemsOnSlot = {};       // counter to save number of events in same time slot 
var maxItemsOnRow = {};     // counter to save max number of events in row

utilize eventRender and eventAfterAllRender callbacks

eventRender: function(event, element, view){
    // for each event, margin top and other css attributes are changed to stack events on top of each other
    if(!(event.start in itemsOnSlot)){          // if itemsOnSlot has no index with current event's start time
        itemsOnSlot[event.start] = 1;           // create index and set count to 1
        $(element).addClass('slot-attributes'); // add css to change the event style
    }else{                                      // if itemsOnSlot already has a index with current event's start time
        itemsOnSlot[event.start] += 1;          // increase counter by 1
        // change margin top to stack events on top of each other and add css to change the event style
        $(element).css('cssText','margin-top:'+(itemsOnSlot[event.start]*18)+'px !important;').addClass('slot-attributes');
    }
},

eventAfterAllRender: function(view) {

    // this loop is run to get the max number of events per row 
    for(var start in itemsOnSlot){          // for all the timeslots with events in them 
        var time = start.substr(16,8);      // extract required time format from index - eg. 14:00:00
        if(!(time in maxItemsOnRow)){       // if maxItemsOnRow has no index with current time
            maxItemsOnRow[time] = itemsOnSlot[start];   // create index and set count to current day's number of events in this time slot
        }else{                              // if maxItemsOnRow already has a index with current time
            if(itemsOnSlot[start] > maxItemsOnRow[time]){   // if current day's number of events in this time slot are greater than existing number
                maxItemsOnRow[time] = itemsOnSlot[start];   // replace current time's number of slots
            }
        }
    }

    // change height of each row using values from maxItemsOnRow
    $('div.fc-slats > table> tbody > tr[data-time]').each(function() {  // for all rows in calendar
        var time = $(this).attr('data-time');   // get time of each row
        if(time in maxItemsOnRow){              // if current row's time is in maxItemsOnRow
            $(this).css('cssText','height:'+(maxItemsOnRow[time]*18)+'px !important;'); // change the height of the row to contain max items in row
        }else{                                  // if current row's time is not in maxItemsOnRow (no events in current time slot)
            $(this).css('cssText','display: none !important;');    // hide timeslot
        }
    });

    // repaint the calendar with new dimensions
    $('#calendar').fullCalendar('option', 'aspectRatio', $('#calendar').fullCalendar('option', 'aspectRatio'));

    itemsOnSlot = {};     // reset variables
    maxItemsOnRow = {};     // reset variables
},

CSS

.slot-attributes {
    left: 4px !important;
    right: 3px !important;
    height: 15px !important;
    margin-right: 0 !important;
}