React Scheduler - Optimize Scheduler Performance with Lazy Loading
If the performance of a Scheduler component suffers due to a high number of appointments, you can lazy load the data as necessary.
Modify your back-end API to accept queries with time limit parameters. For example, the query
appointments?startDate=01-01-2024&endDate=01-07-2024
should only return events within the specified time window.Create a
customStore
that can pass extra arguments to your back-end code.const myCustomStore = new CustomStore({ key: 'id', async load(loadOptions) => { const startDate = loadOptions.startDate; const endDate = loadOptions.endDate; try { const response = await fetch(`https://my-server.com/api/appointments?startDate={startDate}&endDate={endDate}`); const result = await response.json(); return { data: result.data; } } catch (err) { throw new Error('Data Loading Error'); } } });
To indicate that your back-end server is now responsible for filtering, set the
remoteFiltering
Scheduler option totrue
.jQuery
index.js$("#schedulerContainer").dxScheduler({ dataSource: myCustomStore, remoteFiltering: true ... });
Angular
app.component.html<dx-scheduler [dataSource]="myCustomStore" [remoteFiltering]="true" ...> </dx-scheduler>
Vue
App.vue<DxScheduler :data-source="myCustomStore" :remote-filtering="true" ... />
React
App.js<Scheduler dataSource={myCustomStore} remoteFiltering={true} ... />
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.