Spanning Events overlaid other events

[shahzaib78631]

The issue is related to events spanning across multiple days.

Following is the events array:

[
  {
    "id": "252",
    "title": "20:41 - 23:59 (14-16)",
    "start": dayjs("2023-03-14T15:41:00.000Z").toDate(),
    "end": dayjs("2023-03-16T18:59:00.000Z").toDate(),
    "startTime": "2023-03-14T15:41:00.000Z",
    "endTime": "2023-03-16T18:59:00.000Z"
  },
  {
    "id": "253",
    "title": "20:41 - 23:59 (15-17)",
    "start": dayjs("2023-03-15T15:41:00.000Z").toDate(),
    "end": dayjs("2023-03-17T18:59:00.000Z").toDate(),
    "startTime": "2023-03-15T15:41:00.000Z",
    "endTime": "2023-03-17T18:59:00.000Z"
  },
  {
    "id": "254",
    "title": "20:41 - 23:59 (16-18)",
    "start": dayjs("2023-03-16T15:41:00.000Z").toDate(),
    "end": dayjs("2023-03-18T18:59:00.000Z").toDate(),
    "startTime": "2023-03-16T15:41:00.000Z",
    "endTime": "2023-03-18T18:59:00.000Z"
  },
  {
    "id": "255",
    "title": "20:41 - 23:59 (17-18)",
    "start": dayjs("2023-03-17T15:41:00.000Z").toDate(),
    "end": dayjs("2023-03-19T18:59:00.000Z").toDate(),
    "startTime": "2023-03-17T15:41:00.000Z",
    "endTime": "2023-03-19T18:59:00.000Z"
  },
  {
    "id": "256",
    "title": "20:41 - 23:59 (18-20)",
    "start": dayjs("2023-03-18T15:41:00.000Z").toDate(),
    "end": dayjs("2023-03-20T18:59:00.000Z").toDate(),
    "startTime": "2023-03-18T15:41:00.000Z",
    "endTime": "2023-03-20T18:59:00.000Z"
  },
  {
    "id": "257",
    "title": "20:41 - 23:59 (19-21)",
    "start": dayjs("2023-03-19T15:41:00.000Z").toDate(),
    "end": dayjs("2023-03-21T18:59:00.000Z").toDate(),
    "startTime": "2023-03-19T15:41:00.000Z",
    "endTime": "2023-03-21T18:59:00.000Z"
  }
]

This is how the events are rendering.

As you can see from the screen shot event 16-18 was overlaid by event 17-19, then event 17-19 was overlaid by 18-20 and so on..

Expected Behavior:
Events should be rendered in a similar fashion as 14-16 and then 15-17.

[HoaiHuynh]

I'm facing the same issue

[shahzaib78631]

I'm facing the same issue

I resolved this issue by sorting the events. You can use this function or modify it as per your requirements.

const sortTimeslots = (initialSlot, allTimeslots) => {
  // Helper function to check if one timeslot is after another
  const isAfter = (current, last) => moment(current.start).isAfter(moment(last.end));

  // Reduce the timeslots array to include only non-overlapping timeslots
  const nonOverlappingSlots = allTimeslots.reduce((accumulated, current) => {
    const lastSlot = accumulated[accumulated.length - 1];
    if (isAfter(current, lastSlot)) {
      accumulated.push(current);
    }
    return accumulated;
  }, [initialSlot]); // Start with the initialSlot

  // Find the difference between the original array and the non-overlapping array
  const remainingSlots = _.differenceWith(allTimeslots, nonOverlappingSlots, _.isEqual);

  // Recursively sort the remaining timeslots if any
  if (remainingSlots.length > 0) {
    const sortedRemaining = sortTimeslots(remainingSlots[0], remainingSlots);
    nonOverlappingSlots.push(...sortedRemaining);
  }

  return nonOverlappingSlots;
};