Hello,
I am currently refactoring my scheduler code and so far migrated from the normal Scheduler v4.x to the latest Scheduler version of v5 (migration done on 31.01.). That migration was successful. After migrating to Scheduler v5.x we updated the license so that we can use the SchedulerPro variant. We were able to install the SchedulerPro and change all imports accordingly, however since that update the data-binding within react does not work correctly anymore.
In our project we use the event listeners of bryntum to evalulate wether the user should do certain actions (such as drag/drop/resize). The usage of those event listeners does work as far as we are not calling our redux+immerjs store to manipulate any data that we are passing to the scheduler through the props. As soon as the data which we pass to the SchedulerPro instance is updated within our store, the update is not reflected within the scheduler anymore and the data seems to be gone from the scheduler stores even thought it is passed just like before.
The weird part is, that no errors are thrown within the developer console. The only behavior that we noticed is that as soon as one of the "buggy" event listeners are triggered, the events will flash once and then just disappear. They will not reappear again even when navigating to the date again.
Navigation also works fine. Our app navigates through a custom DatePicker which passes the values to the schuduler ref "setTimeSpan" & scrollToDate" methods. This still works as before so adding data to the events/eventAssignments arrays is not the issue, just the manipulation of the data causes the crash.
On a side note: We configured the scheduler so that one event can be assigned to multiple resources. This also works only initially and adding one resource to the event causes the store to be emptied as well (adding one store updates the event and adds a new assignment entry to the array)
EDIT:
The data within the bryntum internal stores is not gone, it is just not reflected within the scheduler anymore. When I for example right click into the scheduler then the entries appear very shortly and are afterwards gone again (flashing once/twice)
This is how we call the SchedulerPro:
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-react';
...
/*
works! Data is fetched by our store and added to the events arrays in the background. As long as nobody manipulates that data, we can keep moving within our scheduler
*/
useEffect(() => {
if (startDate && endDate && schedulerRef.current) {
schedulerRef.current.instance.setTimeSpan(startDate, endDate);
schedulerRef.current.instance.scrollToDate(startDate, {
block: 'center',
animate: true,
});
}
}, [startDate, endDate, selectedPresetId]);
....
const loading = resources.length < 1;
return (
<BryntumContextProvider ref={schedulerRef}>
<Header>
{/*xxx*/}
</Header>
<S.SchedulerWrapper ref={drop}>
<BryntumSchedulerPro
ref={schedulerRef}
/* STORE */
resources={loading ? [] : resources}
events={loading ? [] : events}
assignments={loading ? [] : eventResourceAssignments}
columns={memoizedColumns}
/*
EVENT LISTENERS
*/
onBeforeEventDrag={handleBeforeEventDrag} // no internal state update, works
onBeforeEventResize={handleBeforeEventResize} // no internal state update, works
onBeforeEventResizeFinalize={handleEventDropPreValidation} // no internal state update, works
onBeforeEventDropFinalize={handleEventDropPreValidation} // no internal state update, works
onBeforeEventEdit={handleShouldEventEdit} // causes crash as soon as state event item state is updated
onAfterEventDrop={handleEventMoveChange} // causes bryntum store to crash ""
onBeforeEventDelete={handleBeforeEventDelete} // causes bryntum store to crash ""
onEventResizeEnd={handleEventMoveChange} // causes bryntum store to crash ""
onEventSelectionChange={handleSelectedEvents} // causes bryntum store to crash ""
onBeforeSelectionChange={handleShouldSelectEvent} // no internal state update, works
/*
MENU / SCHEDULER - right click actions
*/
eventMenuFeature={eventMenuFeatureConfig}
scheduleMenuFeature={scheduleMenuFeatureConfig}
/*
BASIC CONFIGURATION
*/
{...configuration}
/>
</S.SchedulerWrapper>
<DragWarningModal
isOpen={openDragWarning}
handleClose={handleCloseMoveModal}
eventDragContext={eventDragContext}
/>
</BryntumContextProvider>
);