Best practices for programmatically updating data (Performance and State preservation)

[Gonzalo Trujillo Almeida]

Hello Syncfusion Team,

I am working on an Angular application that implements the Schedule component. This Angular app is embedded within a larger Javascript application, receiving configuration and data via events from the parent app.

The Schedule component needs to handle dynamic data updates sent by the main application. These updates can be:

1. A single event update: Changing properties of an existing appointment.

2. A full dataset replacement: Receiving a completely new array of events to replace the current ones.

Currently, whenever I receive new data (whether it's a small change or a full swap), I am reassigning the data source property directly:

this.scheduleObj.eventSettings.dataSource = newData;

I suspect this approach (changing the dataSource reference directly) might not be the most efficient or recommended way to handle updates, as it triggers a full re-render of the component.

I noticed this causes side effects, such as the calendar scroll position resetting to the top immediately after the data update, causing the user to lose focus. While the scroll reset is the most visible issue, I am concerned that this "brute force" update might lead to other performance issues or state inconsistencies in the future.

Could you clarify what is the standard recommended pattern for updating data in these scenarios?

1. For single event updates: Should I strictly use saveEvent / addEvent instead of touching the dataSource?

2. For full data replacement: If I need to swap all events, is there a better method than dataSource = data that minimizes DOM re-rendering (and avoids resetting the scroll/view state)?

I am looking for the most robust solution to ensure smooth transitions and performance.

Thanks in advance.

[Vijay Ravi]

Hi Gonzalo Trujillo Almeida,

Greetings from Syncfusion Support.

We have checked and validated your reported query for your requirement. For incremental changes, use the Schedule CRUD APIs rather than reassigning eventSettings.dataSource. Specifically, call addEvent/saveEvent/deleteEvent for single appointment additions, edits, and removals.

These APIs update only the impacted items and avoid unnecessary re-rendering.
 

For full data replacement, keep the same array reference, replace its contents via splice, and invoke scheduleObj.refreshEvents(). If you must replace the array reference entirely, set dataSource = newData and then call refreshEvents() to redraw only the event layer. Avoid refresh() or recreating the component, and keep stable Id values so updates are efficiently applied.

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Gonzalo Trujillo Almeida]

Hello Vijay and Syncfusion Team,

Thank you for your previous guidance; using refreshEvents() and the CRUD APIs has been very helpful for our event management. I have a new inquiry regarding cell customization. We are using the beforeRenderCell event to inject calculated summaries into each cell based on the event data for that specific day. It is used in the views: Month, TimelineWorkWeek, TimelineDay and Agenda

Since our data is loaded asynchronously, the beforeRenderCell event fires during the initial component rendering before the events are available, resulting in empty calculations. When the data finally arrives and we update the source, the cells do not re-execute this event. I have tested using this.scheduleObj.refresh(), which does trigger the cell recalculation correctly, but it introduces a significant visual glitch: as we use filters on our data, the Scheduler briefly displays all events for a few seconds before the filters are applied, creating an unwanted flickering effect.

I would like to know if there is a recommended way to force a re-render of the cells (triggering beforeRenderCell again) without performing a full component refresh(). If this is not possible through events, how else could I do this to ensure that the calculations remain synchronized with the dataSource, avoiding the visual flickering caused by full rendering?

Thank you in advance for your help.

[Gonzalo Trujillo Almeida]

Hello Vijay and Syncfusion Team,

I've been performing some additional tests regarding the cell customization issue I mentioned. I found that using the #dateHeaderTemplate works perfectly for most views, allowing me to render a custom component that displays calculated data for each day. However, I’ve noticed that this template is not applied to the Monthly view.

While I could use #cellTemplate for the Monthly view, it renders the information within the cell body, whereas I specifically need to display it in the header area, right next to the day number. I considered using the renderCell event for this purpose, but it brings me back to my initial problem: as my data is loaded asynchronously, the event does not fire again once the data arrives, leaving the UI outdated.

Is there a way to define a template specifically for the day headers in the Monthly view, similar to how #dateHeaderTemplate works for other views? If not, could you suggest an alternative to inject a reactive component or custom UI into the header area of a Monthly view cell that stays in sync with asynchronous data updates?

I am attaching a screenshot showing how it appears correctly in one view and how it appears in the monthly view, indicating in green where I want it to appear.

Thank you for your help.

Attachment: calendar_30b7204a.jpg

[Sivakumar ShunmugaSundaram]

Hi Gonzalo Trujillo Almeida,

Query: Cell summaries after async data updates.

As mentioned earlier regarding the CRUD methods (addEvent, saveEvent, deleteEvent) for individual changes or direct modification of the bound dataSource array for bulk updates – these remain the best practice for efficient programmatic updates.

To ensure custom cell summaries stay updated after async data changes without flickering or full re-render: Use scheduleObj.refreshTemplates('cellTemplate') to specifically refresh cell templates, or scheduleObj.refreshLayout() for layout updates that can re-trigger cell customizations.

Additionally, if only events need updating: Call scheduleObj.refreshEvents() for high-performance event re-rendering without affecting the full layout.

Documentation:

• Manual refresh methods: https://ej2.syncfusion.com/angular/documentation/schedule/how-to/manual-refresh
• Cell customization options: https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization

Query: dateHeaderTemplate not working in Month view for day headers**

As documented, `dateHeaderTemplate` is not supported in Month view. The official recommendation is to use the `renderCell` event for customizing Month view cells, including adding content beside the date number.

Documentation:

• Header bar: https://ej2.syncfusion.com/angular/documentation/schedule/header-bar
• renderCell event details: https://ej2.syncfusion.com/angular/documentation/api/schedule/#rendercell

Please review the shared details and get back to us if you need any further assistance.

Regards,

Sivakumar S

 

[Gonzalo Trujillo Almeida]

Hello Sivakumar,

Thank you very much for your help, which has enabled us to resolve the issues we were having.

Best regards

[Vijayakumar Rajasekar]

Hi Gonzalo Trujillo Almeida,

Thank you for the update. We’re glad to hear that the solution meets your requirements. If you need any further assistance, please feel free to reach out—we’re here to help.

Regards,

Vijayakumar Rajasekar