Stacking Overlapping Events in React FullCalendar Resource Timeline View

Question

I'm working on a project where I need to implement a resource timeline view using React and FullCalendar. Specifically, I want to display events stacked on top of each other if their time overlaps. However, despite trying various approaches, I'm unable to achieve this stacking behavior.

Default behavior:

Expected behavior:

Here's a simplified version of my code:

import FullCalendar from '@fullcalendar/react';
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";

const events = [
  { id: 1, title: 'Event 1', start: '2024-03-13T08:20:36', end: '2024-03-13T08:23:36', resourceId: "someId" },
  { id: 2, title: 'Event 2', start: '2024-03-13T08:09:36', end: '2024-03-13T10:09:36', resourceId: "someId" }
];

const TimelineView = () => {
  return (
    <FullCalendar
      plugins={[timeGridPlugin]}
      initialView="timeGridWeek"
      events={events}
      resources={resources}
    />
  );
};

export default TimelineView;

In this setup, events 1 and 2 should stack on top of each other. However, they appear one by one without any stacking.

I've explored options like adjusting eventOverlap and eventDisplay properties in FullCalendar, but I haven't been successful in achieving the desired stacking effect.

Could someone guide me on how to properly stack overlapping events in a resource timeline view using React FullCalendar? Any insights or code examples would be greatly appreciated. Thank you!