JavaScript/jQuery 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
.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.