Angular 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.

  1. 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.

  2. 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');
            }
        }
    });
  3. To indicate that your back-end server is now responsible for filtering, set the remoteFiltering Scheduler option to true.

    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}
        ...
    />