Dragging events out of loaded date range leads to errors or losing duration

Hi everyone,

I have trouble with my Scheduler when dragging events out of the loaded time range using infinite scrolling.

So I'm starting with a range of multiple months around "today" loaded and dragging systems out of this range to the left (back in time) or to the right (forward in time). When I reach the end of the currently loaded time range (i. e., the range covered by the horizontal scrollbar), the previous/subsequent range should load where I could continue to drag my event out to. However, this leads to the following unexpected behaviour for me:
____________________________________________________________________________

1) When dragging an event far enough to the left, I get a "No next cell found" error. The expected new (chronologically previous) time range doesn't load and moving the event around the InfiniteScrollingMargin will repeatedly trigger this error. However, after causing this error, I'm able to drop the event in the still-loaded range without harm.

With my current configuration (see code below), this will only happen after multiple reloads of a new "left" time range, when starting from "today" (2022-05-30 at the time of testing) and dragging the event to around December 2021/January 2022.
____________________________________________________________________________

2) When dragging an event far enough to the right, the duration of the event seems to get lost - on load of a new time range, the event moving indicators will be displayed right next to each other with no shadow event duration range in between (for a bar with an original duration of 5 days, in this example). It looks like the event duration is 0 days. On drop of the event, it will show with a duration of 1 day (filling the whole cell where it was dropped), and the new start date and end date that are saved are the same datetime stamp.

I have also observed that setting eventEndSpec = "Date" causes the event to "look" the same in this situation, but the new end date will be saved as start minus 1 day, instead of the identical datetime stamp.

When picking an event up and dragging it around again after dropping it with lost duration, it will continue keep a duration of 1 day only, instead of it's original duration.

However, if I drag an event into a range where it seems to lose it's original duration, then drag it back to the previously loaded time range without dropping in between, it will get it's original duration back.

With my current configuration, this will only happen after multiple reloads of a new "right" time range, when starting from "today" (2022-05-30 at the time of testing) and dragging the event to around November/December 2022.
____________________________________________________________________________

3) Related to (2): If my browser window is set to a relatively high width, I will encounter an additional behaviour for time ranges between the currently loaded one and the one that seems to break the duration. After loading the first new time range to the right, the dragged event's duration seems to stay the same (since the event moving indicators keep apart at the correct distance), but the shadow representing the event bar in between them doesn't show, the space between the indicators just remains empty. When dropping the event in this range, it looks normal. This behaviour will stay the same for all time ranges up until the one where the duration seems to break (see 2).

This last matter is something I have only experienced for wide viewports, while with narrower ones, the event shadow shows normally until the point of the event duration breaking is reached.
____________________________________________________________________________

For the originally loaded time range and the ones between the described margins, I have not encountered any problems. Please also find the screenshots appended for illustration.

I'm using DayPilot Pro for React/JavaScript, currently on version 2022.2.5264. The browser I used is Chrome.

I assume the problem is somewhere in my scheduler configuration, but I can't identify what causes the issue. Could you maybe point me the right direction? Below is a minimal reproducible example of a scheduler showing the behaviour I described above:
____________________________________________________________________________

class Scheduler extends Component {
  constructor(props) {
    super(props);

    this.state = {
      schedulerConfig: {
        cellWidth: 30,
        timeHeaders: [{ groupBy: "Month" }, { groupBy: "Day", format: "d" }],
        scale: "Day",
        startDate: DayPilot.Date.today().addDays(-90),
        scrollTo: DayPilot.Date.today(),
        days: 180,
        eventMovingStartEndEnabled: true,
        infiniteScrollingEnabled: true,
        infiniteScrollingStepDays: 30,
        eventMoveSkipNonBusiness: true,
      },
    };
  }

  componentDidMount() {
    const resources = [
      { name: "0", id: "0" },
      { name: "1", id: "1" },
      { name: "2", id: "2" },
      { name: "3", id: "3" },
    ];

    const events = [];
    const today = new DayPilot.Date().getDatePart();
    for (let idx = 0; idx < resources.length; idx++) {
      const duration = DayPilot.Duration.ofDays(5);
      const event = {
        id: String(idx),
        text: idx,
        duration: duration,
        start: today,
        end: today.addTime(duration),
        resource: String(idx),
      };
      events.push(event);
    }

    this.setState({
      schedulerConfig: {
        ...this.state.schedulerConfig,
        resources: resources,
        events: events,
      },
    });
  }

  render() {
    return (
      <DayPilotScheduler
        {...this.state.schedulerConfig}
        ref={(component) => {
          this.scheduler = component && component.control;
        }}
      />
    );
  }
}

export default Scheduler;

Thanks in advance for taking the time to read this and consider my problem! Let me know if anything is unclear.

Best wishes,
Katharina

PS: I haven't been able to figure out how to format code properly in this forum and I've seen other people just copy-paste their code as plain text... maybe it would help readability if you could offer a small guideline for this forum's markup syntax, since it doesn't seem to be clear to everyone :)