I encountered the same issue with that particular problem, which proved to be quite challenging due to the unconventional way the plugin constructs the calendar using tables and dynamically positioning events with absolute values for the top CSS property.

Fortunately, I was able to devise a versatile solution that functions admirably well. Firstly, I will present you with the code, followed by an explanation of its operation.

To address this issue, I utilized the eventAfterAllRender option in FullCalendar. Here is a live example.https://i.sstatic.net/ZoC5e.png

I made use of moment for time management and assumed that the ID of the FullCalendar HTML element is 'Calendar'.

eventAfterAllRender: function() {

    // define static values, use these values to adjust event item height
    var defaultItemHeight = 25;
    var defaultEventItemHeight = 18;
    // ...

    // retrieve all rows and create a function to select a row based on a specific time
    var rows = [];
    $('div.fc-slats > table > tbody > tr[data-time]').each(function() {
      rows.push($(this));
    });
    var rowIndex = 0;
    var getRowElement = function(time) {
      while (rowIndex < rows.length && moment(rows[rowIndex].attr('data-time'), ['HH:mm:ss']) <= time) {
        rowIndex++;
      }
      var selectedIndex = rowIndex - 1;
      return selectedIndex >= 0 ? rows[selectedIndex] : null;
    };

    // reposition events items and increase row height when necessary
    $('div.fc-content-col > div.fc-event-container').each(function() {  // iterate through week columns
      var accumulator = 0;
      var previousRowElement = null;

      $(this).find('> a.fc-time-grid-event.fc-v-event.fc-event.fc-start.fc-end').each(function() {  // iterate through events in column
        // determine the current event time and its respective row
        var currentEventTime = moment($(this).find('> div.fc-content > div.fc-time').attr('data-full'), ['h:mm A']);
        var currentEventRowElement = getRowElement(currentEventTime);

        // move down events if multiple in same row (using margin-top to avoid conflicts)
        if (currentEventRowElement === previousRowElement) {
          accumulator++;

          $(this).css('margin-top', '+=' + (accumulator * defaultItemHeight).toString() + 'px');

          var maxItemsOnRow = currentEventRowElement.attr('data-max-items') || 1;
          if (accumulator >= maxItemsOnRow) {
            currentEventRowElement.attr('data-max-items', accumulator + 1);
            currentEventRowElement.css('height', '+=' + defaultItemHeight.toString() + 'px');
          }
        } else {
          rowIndex = 0;
          accumulator = 0;
        }

        // set default styles for event item and update previosRow
        $(this).css('left', '0');
        $(this).css('right', '7px');
        $(this).css('height', defaultEventItemHeight.toString() + 'px');
        $(this).css('margin-right', '0');
        previousRowElement = currentEventRowElement;
      });
    });

    $('#calendar').fullCalendar('option', 'aspectRatio', $('#calendar').fullCalendar('option', 'aspectRatio'));
  }

How Does the Code Operate:

Initially, I located all tr elements representing the rows in my calendar, each containing its own timestamp attribute.

Subsequently, I iterated over each column, retrieving the event items within each one represented by anchor elements with date attributes such as data-full.

For each event, I determined its appropriate row position and adjusted it vertically using the margin-top property rather than the standard top property to prevent plugin conflicts.

In addition, I tracked the maximum number of events in a row to ensure proper height adjustments.

This outlines the primary functionality of the code. Feel free to inquire further if needed.

To customize your events, you can add a class and style them using CSS.

For example, you can create a style like this:

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

and then apply the class to an event like this:

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

If this is what you're looking for, check out this Fiddle.

Another option is to use the eventAfterRender callback to adjust the height of a specific row, but this may require some tweaking:

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

You can see an example of this workaround here: https://jsfiddle.net/m5uupf9x/3/

I encountered a similar issue and while Alexander's response was helpful, I experienced performance issues due to excessive DOM manipulation. With around 2000-3000 events per week, it became unmanageable in browsers like Firefox and IE. Therefore, by modifying Alexander's solution and reducing DOM manipulation, I devised the following approach.

Variables

var itemsOnSlot = {};       // keeping track of number of events in each time slot
var maxItemsOnRow = {};     // tracking maximum number of events in a row

Utilizing eventRender and eventAfterAllRender callbacks

eventRender: function(event, element, view){
    if(!(event.start in itemsOnSlot)){
        itemsOnSlot[event.start] = 1;
        $(element).addClass('slot-attributes');
    }else{
        itemsOnSlot[event.start] += 1;
        $(element).css('cssText','margin-top:'+(itemsOnSlot[event.start]*18)+'px !important;').addClass('slot-attributes');
    }
},

eventAfterAllRender: function(view) {
    for(var start in itemsOnSlot){
        var time = start.substr(16,8);
        if(!(time in maxItemsOnRow)){
            maxItemsOnRow[time] = itemsOnSlot[start];
        }else{
            if(itemsOnSlot[start] > maxItemsOnRow[time]){
                maxItemsOnRow[time] = itemsOnSlot[start];
            }
        }
    }

    $('div.fc-slats > table > tbody > tr[data-time]').each(function() {
        var time = $(this).attr('data-time');
        if(time in maxItemsOnRow){
            $(this).css('cssText','height:'+(maxItemsOnRow[time]*18)+'px !important;');
        }else{
            $(this).css('cssText','display: none !important;');
        }
    });

    $('#calendar').fullCalendar('option', 'aspectRatio', $('#calendar').fullCalendar('option', 'aspectRatio'));

    itemsOnSlot = {};
    maxItemsOnRow = {};
},

CSS

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