[REACT] Scheduler Sync Issue: Incorrect Payload on Event Add/Remove Operations

[manirajan s]

Hey there,

We're currently using the Bryntum package in runtime and have integrated the Scheduler component.

1. A load call is triggered on initial launch using useEffect.
2. A sync call is triggered when an external Save button is clicked, using addEventListener on the window object.

We’re encountering an issue with the data sync behavior:

1. When we click on "Unassigned", the event is visually removed as expected. However, after clicking the Save button, the changes are not correctly reflected in the resources, events, and assignments data — the removal does not sync properly.

2. Similarly, during drag-and-drop operations (i.e., assigning or reassigning events), the payload sent on Save includes outdated or incorrect data.

3. Both additions and removals are incorrectly grouped together under the added object in the payload, showing all events and resources, as demonstrated in the video at the end.

Could you please help us ensure that the correct payload is generated — reflecting only the actual additions and deletions — during sync operations?

PFA video for your reference.

payload_sync_call.mp4

(25.89 MiB) Downloaded 11 times

[alex.l]

Hi,

Please attach runnable code for debugging.
Some thoughts:

1. make sure all ids are there when you load data
2. there is a https://bryntum.com/products/scheduler/docs/api/Scheduler/data/EventStore#function-unassignEventFromResource method to unassign event
3. not sure why do you need to unassign event that you are going to remove afterwards. It will be handled by CrudManager.

[manirajan s]

Hi Alex,

It’s not possible to share runnable code due to runtime dependencies.
Please help me remove events when 'Unassigned' is clicked. During the sync call, these same events should also be deleted from the CRUD manager.

[manirajan s]

Hi,

const onUnassignedData = (eventRecord: any) => {
const eventModel = eventRecord?.eventRecord;
console.log("eventmodel", eventModel);  

scheduler?.eventStore?.unassignEventFromResource(eventModel._data.id, eventModel._data.resourceId)
};

const [eventMenuFeatureConfig, setEventMenuFeatureConfig] = useState({
    items: {
      deleteEvent: false,
      editEvent: false,
      EventCopyPaste: false,
			unassignEvent:true,
      cutEvent: false,
      copyEvent: false,
      splitEvent: false,
      Unassigned: {
        text: 'Unassigned',
        icon: 'b-fa-trash b-fa-fw',
        onItem: onUnassignedData,
      },
    },
  });
  

eventMenuFeature={eventMenuFeatureConfig}

As per your suggestion, I have integrated unassignEventFromResource. However, it is not removing visually also. Kindly correct the onUnassignedData function if I am wrong.

[alex.l]

Please see https://bryntum.com/products/scheduler/examples/dependencies/

Try to remove any event with dependency and check in console

scheduler.crudManager.changes

Screenshot 2025-05-15 at 09.51.37.png (54.87 KiB) Viewed 178 times

See it has all required data removed automatically together with event.

[alex.l]

Same thing if you called

scheduler.eventStore.remove(evt)

Screenshot 2025-05-15 at 09.53.15.png (109.98 KiB) Viewed 177 times

[manirajan s]

Hi Alex,

In runtime, I can't execute the command in the console you suggested and am facing a type error. Kindly help with this.
We are not using dependencies here.

type_error.png (152.04 KiB) Viewed 177 times

[alex.l]

That is expected if you didn't set global variable with scheduler instance in your code.
I asked you to use our demo https://bryntum.com/products/scheduler/examples/dependencies/ for testing.
In your case you can edit your code and check. As well as try to get scheduler first.

scheduler = bryntum.query('scheduler')

I suggest you to review your customisations, there is might be some overdoing, you might be need to remove some unrequired code regarding that.

[manirajan s]

Hi Alex,

As per your suggestion, i could able to set global variable and checked changes are emitting in schedulerProRef but it doesn't sync with schedulerCrudManagerRef. Kindly help on this.
PFA video for your reference.

crudmanager.mp4

(17.97 MiB) Downloaded 8 times

[kronaemmanuel]

Hey manirajan,

Something doesn't seem right here, from what I see in the video, you are creating: const crudManager = new CrudManager({...}) inside the component, and then setting schedulerCrudManagerRef.current = crudManager. But this will create a new crudManager everytime the component renders.

Probably best thing to do would be to move const crudManager = new CrudManager({}) outside the component but if you can't do that you should have some logic like:

if (!schedulerCrudManagerRef.current) { schedulerCrudManagerRef.current = crudManager }

or use memoization, so it wouldn't get created on each render again:

const crudManager = useMemo(() => new CrudManager(), []);

Regards,
Krona