Our pure JavaScript Scheduler component


Post by netten.mehra »

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> );

Post by alex.l »

Hi netten.mehra,

That's hard to say what exactly wasn't updated without debugging and data JSON review. Since it works in our examples, it's definitely something missed to be updated.
Could you please attach runnable app with data you used and provide steps to reproduce the issue?

Please make sure you used correct naming for events, since Pro version doesn't use EventEdit feature, it uses TaskEdit feature https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/feature/TaskEdit
and another event names accordingly https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/feature/TaskEdit#events

For the rest, it's hard to say without debugging.

All the best,
Alex


Post by netten.mehra »

thanks for the quick reply.

The listeners that are defined above are still being called and I took a look into the payload of those and it was also fine. The data is correctly passed from the listeners to my functions. But after my functions manipulated the objects, the stores dont show the entries anymore.

It seems to me, that the issue is not the events themself but the manipulation of the objects that took place after the events have been successfully called.


Post by alex.l »

Anyway, you need to switch on correct event names to avoid problems in the future.
I cannot give you more comments on this without a test case, unfortunately. I have to see what exactly is going on.

All the best,
Alex


Post by netten.mehra »

I attached an example where the behavior above can be reproduced.

For that I re-used the onEventResizeEnd listener as an example and adjusted the code so that the event that was resized will always be re-assigned to the user Fredy.

The app displays the weird behavior from the beginning and if you are not able to see any data from the beginning, then please press "right-click" > "Add Event", then all other events will also appear (also an issue with immerjs/redux + bryntum).

Attachments
example.zip
(1.44 MiB) Downloaded 16 times

Post by alex.l »

Hi netten.mehra,

Thank you for the test case, it helped a lot.
I see an error right after I opened an application:

Screenshot 2023-02-02 at 11.15.41.png
Screenshot 2023-02-02 at 11.15.41.png (380.23 KiB) Viewed 274 times

Did you see same error?
I believe problems you experienced is caused because of this exception. We have a ticket for this here: https://github.com/bryntum/support/issues/6094

Another moment, you need to avoid using resourceId field for EventModel, it should be used only for singleAssignment mode. Better to just remove it from your data.

All the best,
Alex


Post by netten.mehra »

Hey Alex,

I also encountered the error message you sent me in the screenshot. I am not able to remove it in the test case because of the timing. Our application works fine as the resource data is fetched on a different http-call than the assignments/events. For me the error in the console only appears if all data is already passed and sent at the same time to the scheduler.

removing resourceId did not resolve the error of the disappearing events in the gantt chart but I will implement the changes about the renaming of events and the removal of the resourceId regardless. Thanks for those optimization hints.


Post by alex.l »

I cannot run the app as is because of the error, but when I change it to avoid that problem, I see data loaded and works correct. But I changed the way of data binding for that and used useEffect with set data for stores inside.

I read your posts again. Please check this guide https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/integration/react/data-binding#binding-existing-data-to-the-component
It shows how to bind data to SchedulerPro. Try that approach please.

All the best,
Alex


Post by netten.mehra »

Hey Alex,

After awaiting the latest changes for the scheduler pro v5.2.10 and retrying, the data still does not appear within our application. The error is not thrown anymore, but the data is still not visible with the pro version.

I checked the data-binding documentation link you provided and tried to apply the logic from the example with BryntumProjectModel, but this also didnt help with displaying the data. The problem remains. Its just weird since it was working fine with the normal Scheduler v5.2.9.

I added some screenshot to show how we tried to use it together with the useState and useEffect, but this didn't work either. Currently the "best" solution was for us to directly add it to the BryntumProjectModel as the data is then displayed for at least an instance (see attached video) but that also is not a solution.

Is there anything else we could try?

Attachments
Bildschirmaufnahme 2023-02-21 um 16.49.19.mov
(1.67 MiB) Downloaded 12 times
Bildschirmfoto 2023-02-21 um 16.44.58.png
Bildschirmfoto 2023-02-21 um 16.44.58.png (57.33 KiB) Viewed 207 times
Bildschirmfoto 2023-02-21 um 16.44.37.png
Bildschirmfoto 2023-02-21 um 16.44.37.png (31.52 KiB) Viewed 207 times

Post by alex.l »

That's weird yes. Could you please share your app with us, so we will be able to debug it and help you faster?

All the best,
Alex


Post Reply