How to Refresh Scheduler Events Without Duplicates?

[natalie321]

Hi everyone, I’m having trouble updating events dynamically in Bryntum Scheduler and would greatly appreciate some guidance. I’m trying to fetch events from an external API and refresh the Scheduler so that users always see the latest data without needing to reload the page. Initially, the events render fine, but when I reload the store with new data, the timeline either duplicates events or clears everything until I refresh the page. I’ve tried eventStore.loadData(newEvents, true) and scheduler.project.commitAsync(), even removing and re-adding the store, but none of these approaches fully worked.

const scheduler = new Scheduler({
    appendTo: 'container',
    startDate: new Date(2025, 8, 29),
    endDate: new Date(2025, 9, 5),
    resources: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
    events: [
        { id: 1, resourceId: 1, startDate: '2025-09-29', endDate: '2025-09-30', name: 'Kickoff' },
        { id: 2, resourceId: 2, startDate: '2025-09-30', endDate: '2025-10-01', name: 'Review' }
    ],
    features: { stripe: true }
});

fetch('/api/events')
    .then(res => res.json())
    .then(newEvents => {
        scheduler.eventStore.loadData(newEvents, true);
        scheduler.project.commitAsync();
    });

Is there a recommended way to refresh the eventStore so the timeline updates correctly without duplicates or losing existing events? Any tips would be greatly appreciated!
Pips NYT

[tasnim]

Hi there,

Use the async APIs and ensure the incoming dataset has stable IDs (and assignments if you use AssignmentStore). Best options:

• Replace the store atomically with loadDataAsync (preferred):

    const newEvents = await fetch('/api/events').then(r => r.json());
    await scheduler.eventStore.loadDataAsync(newEvents); // replaces and triggers calculations

• Or set .data and wait for project to finish:

    scheduler.eventStore.data = newEvents;
    await scheduler.project.commitAsync();

If you get duplicates, check that your server either:

• returns the same ids for existing events so they are updated, or
• you explicitly remove before loading:
  scheduler.eventStore.removeAll(); await scheduler.project.commitAsync();

  then loadDataAsync(...).

If you use assignments / multi‑assignment update the AssignmentStore as well (or use CrudManager load/sync). See EventStoreMixin.loadDataAsync and the data property for details:

• EventStoreMixin.loadDataAsync
• EventStoreMixin.data