Overlapping events in month view

[wseow87]

Hi @acro5piano ,

I came across some issues with overlapping multiple days events in month view. Given the following examples:

var sampleEvents: Array<ICalendarEventBase> = [
  {
    title: 'Event 1',
    start: new Date(2023, 0, 1, 15, 0, 0, 0),
    end: new Date(2023, 0, 2, 10, 0, 0, 0),
  },
  {
    title: 'Event 2',
    start: new Date(2023, 0, 2, 15, 0, 0, 0),
    end: new Date(2023, 0, 3, 10, 0, 0, 0),
  },
  {
    title: 'Event 3',
    start: new Date(2023, 0, 3, 15, 0, 0, 0),
    end: new Date(2023, 0, 4, 10, 0, 0, 0),
  },
];

return (<View><Calendar mode="month" height={750} date={sampleEvents[0].start} events={sampleEvents} /></View>);

The calendar month view is showing as such:

There are two issues:

1. Event 1, 2, 3 span across two days each but they are visualized as single day event.
2. Event 3 should be displayed one level lower since it should give way to Event 2 on Tuesday.

The desired output should be as such:

I created a pull request for your review: https://github.com/acro5piano/react-native-big-calendar/pull/892

[wseow87]

I improve the sorting logic further, to optimize the empty spaces in the calendar cell.

with the given events

var sampleEvents: Array<ICalendarEventBase> = [
  {
    title: 'Event 1',
    start: new Date(2023, 0, 1, 15, 0, 0, 0),
    end: new Date(2023, 0, 2, 10, 0, 0, 0),
  },
  {
    title: 'Event 2',
    start: new Date(2023, 0, 2, 15, 0, 0, 0),
    end: new Date(2023, 0, 4, 10, 0, 0, 0),
  },
  {
    title: 'Event 3',
    start: new Date(2023, 0, 3, 15, 0, 0, 0),
    end: new Date(2023, 0, 4, 10, 0, 0, 0),
  },
  {
    title: 'Event 4',
    start: new Date(2023, 0, 4, 15, 0, 0, 0),
    end: new Date(2023, 0, 5, 10, 0, 0, 0),
  },
  {
    title: 'Event 5',
    start: new Date(2023, 0, 5, 15, 0, 0, 0),
    end: new Date(2023, 0, 6, 10, 0, 0, 0),
  },
  {
    title: 'Event 6',
    start: new Date(2023, 0, 6, 15, 0, 0, 0),
    end: new Date(2023, 0, 7, 10, 0, 0, 0),
  },
];

we now get this result

[acro5piano]

@wseow87 Thanks, it was released on v4.0.0!

https://github.com/acro5piano/react-native-big-calendar/releases/tag/v4.0.0