dax dax - 1 month ago 13x
jQuery Question

events should not overlap in month view on fullcalendar

I'm using fullcalendar to generate a calendar of events - below is a picture of my output.

Is there a way to make the a new event start at the given time (and NOT take up the whole day/overlap with other events)? Something like

but less slot and more just event.

This answer comes close - and I think I could implement this in my case but it seems overly complex. Is there an simpler way to do this and I just can't find it?


Here is a slightly modified version that fix the problem from event that start in the middle of the week and/or less than one a day long

eventAfterRender: function(event, element) {

    var currentPosition = $(element).position();
    var currentWidth = $(element).width();
    var pixelsPerDay =  $(element).offsetParent().siblings("table").find(".fc-day-content").width();
    var pixelsPerHour = pixelsPerDay/24;

    //Start Time
    var startTimeOffset = (event.start.getHours() * pixelsPerHour);
    if ($(element).hasClass('fc-event-start')) {
        $(element).css('width', (currentWidth - startTimeOffset) + "px");
        $(element).css('left', (currentPosition.left + startTimeOffset) + "px");

    //End Time
    currentWidth = currentWidth - startTimeOffset; //we have now a new width
    var endTimeOffset = pixelsPerDay - (event.end.getHours() * pixelsPerHour);
    if ($(element).hasClass('fc-event-end')) {
        $(element).css('width', currentWidth - endTimeOffset + "px");