Change default event width in agendaDay view for fullcalendar

Question

When you look at the agendaDay view on the fullcalendar, events take up the full screen. (Well almost full, there's 2.5% cut off near scrollbars. I think that this is totally unnecessary. I would like for the first event take up maybe half of that, and then get smaller as more events are added in that same time slot. Is there any way to do this?

I have looked at the answers here: How to edit width of event in FullCalendar?

and here: Edit width of event in FullCalendar

Both of those work for re-sizing the events but they cause problems once a bunch of events are added in the same slot. I need to be able to put at least 10 events in one slot without it overlapping or css breaking.

Is this possible?

Unknown Unknown · Accepted Answer · 2014-08-08T15:26:44

I had been looking into this for a while, first of all make sure you have slotEventOverlap set to false. My solution was the following code in the eventAfterRender callback:

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');
  }
}

The numEvents function returns how many events are at that time:

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;
}

Hope this is of some use!

Change default event width in agendaDay view for fullcalendar

1 Answers