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

You can add a class to your events and try to customize this events with CSS

As an example you can use style

.test {
    width: 100%;
    height: auto;
    position: relative !important;
    left: 0% !important;
    margin-right: 0% !important;
}

and event like this:

{
    title: 'Lunch',
    start: '2014-06-09T10:30:00',
    className: 'test'
},

Look on this Fiddle if this is what you want to achieve

Also with a little bit workaround you can use eventAfterRender callback to adjust height of specific row. But this is not very safe solution and it requires some tuning:

eventAfterRender: function( event, element, view ) { 
    var row = $(".fc-slats tr:contains('"+ moment(event.start).format('ha') + "')");
    if (moment(event.start).format('mm') != '00')
    {
        row = row.next();
    }
    row.height(element.height()+row.height());
}

https://jsfiddle.net/m5uupf9x/3/