Our pure JavaScript Scheduler component

Post by omnisip »

drag-and-drop-bug.gif (1.86 MiB) Viewed 131 times

Source code / test case example attached. Steps to reproduce:

  1. npm install
  2. npm run start
  3. Start dragging and holding an event element

We identified a problem on our scheduler board when an event element is dragged and held. The issue arises if the event is moved again while an update is in progress. The element continues to display incorrectly, even though it should not. The root cause is unclear, but resolving it is essential as dragging functionality within and outside the grid is necessary. It appears to be a race condition that results in an artifact when a server update coincides with the dragging action.

inline-data example_drag-and-drop.zip
(7.66 MiB) Downloaded 7 times
Last edited by omnisip on Wed Jun 12, 2024 9:47 pm, edited 2 times in total.

Post by mats »

What version are you using?

Post by omnisip »


Post by saki »

Confirmed, it is a bug. I have created the issue here: https://github.com/bryntum/support/issues/9383

Post by ghulam.ghous »

Hi @omnisip,

I have debugged this issue and it turns out to be an issue with how you have configured the project on schedulerPro component. You were directly passing the project to the schedulerPro which is not a recommended way and is creating a new project instance on each re-render caused by the useGetEventsQuery hook. We recommend to use BryntumSchedulerProProjectModel or use useState hook to manage the project config and pass the project variable to schedulerPro component.

Approach 1:

Declare a ref for project:

const projectRef = useRef();

Now use BryntumSchedulerProProjectModel:


// do not pass the assignments as you have already used resourceId on events

and now pass the projectRef to the SchedulerProComponent:


Approach 2:

Place the project config inside a useState variable:

const [project, setProject] = useState({ events, resources});

Pass it to the schedulerPro component:


And everything works great. We have a docs section here on how to configure things: https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/integration/react/guide#best-practices-for-configuration-management

Updated Project:

(7.43 MiB) Not downloaded yet


Drag Artifacts-clip.zip
(11.37 MiB) Not downloaded yet


Post Reply