Event overlapping

[dionart]

Currently I'm facing an issue in my application where events that the dates overlap in between are overlapping visually on top of each other. Is there any fix/workaround for this?

Here's the array of events of this image:

[
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_32ac2163392f4b5289c3a0e32db368bd",
    "name": "overlap 5",
    "startDate": "2023-09-03T07:30:00Z",
    "endDate": "2023-09-03T11:00:00Z"
  },
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_dc2d9cafe4104780b756a2796606a519",
    "name": "overlap 4",
    "startDate": "2023-09-03T07:45:00Z",
    "endDate": "2023-09-03T11:15:00Z"
  },
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_3f9fb08b4ef14cc6af381174c012d969",
    "name": "overlap 3",
    "startDate": "2023-09-03T07:30:00Z",
    "endDate": "2023-09-03T11:00:00Z"
  },
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_345a57ea6003497388f78dc8c1abb6ef",
    "name": "overlap 2",
    "startDate": "2023-09-03T07:30:00Z",
    "endDate": "2023-09-03T11:00:00Z"
  },
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_4b1a70d58ba54ae1bb28585b7dfaf5cd",
    "name": "week overlap",
    "startDate": "2023-09-03T07:30:00Z",
    "endDate": "2023-09-03T11:00:00Z"
  },
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_6f09625476e34d798c4846a7515dfb26",
    "name": "Overlap again?",
    "startDate": "2023-09-13T07:00:00Z",
    "endDate": "2023-09-15T07:00:00Z"
  },
  {
    "__typename": "CalendarEvent",
    "id": "c_evt_e835b1e2e755421dbcd7704d363b6817",
    "name": "Test overlap",
    "startDate": "2023-09-12T07:00:00Z",
    "endDate": "2023-09-14T07:00:00Z"
  }
]

[acro5piano]

Hi, thanks for posting this. I think you can use eventCellStyle prop to control look and feel for the overlapped events. If that doesn't enough, you can use renderEvent prop to control how these cells are rendered.

[acro5piano]

If you create a pull request to fix the problem, I'm happy to merge it. Thanks