/devexpress-blazor-scheduler-load-appointments-range

Blazor, Scheduler, DevExpress

Primary LanguageHTMLOtherNOASSERTION

Scheduler for Blazor - How to load appointments for visible interval only (lazy loading)

This example illustrates how to load only the required portion of appointments depending on the current View and visible interval.

Implementation Steps:

  1. Add DxScheduler and bind it to a DxSchedulerDataStorage with AppointmentMappings specified (Create Data Storage and Specify Mappings):
<DxScheduler DataStorage="@DataStorage">
...
</DxScheduler>
DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage()
    {
        AppointmentMappings = new DxSchedulerAppointmentMappings()
        {
            Id = "AppointmentId",
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status"
        }
    };
  1. Declare variables for the ActiveViewType and StartDate properties, and handle the StartDateChanged and ActiveViewTypeChanged events:
<DxScheduler StartDate="currentDate"
             StartDateChanged="OnStartDateChanged"
             ActiveViewType="activeType"
             ActiveViewTypeChanged="OnActiveViewChanged"
             DataStorage="@DataStorage"
             CssClass="w-100">
             ...
  1. Create a method that will load appointments depending on the current ActiveViewType and StartDate values (e.g. LoadAppointments). Calculate the end date in it.
 void LoadAppointments() {
        switch (activeType) {
            case SchedulerViewType.Day:
                startDate = currentDate;
                endDate = currentDate.AddDays(1);
                break;
            case SchedulerViewType.Week:
                startDate = currentDate.StartOfWeek(DayOfWeek.Sunday);
                endDate = startDate.AddDays(7);
                break;
            case SchedulerViewType.Month:
                startDate = currentDate.StartOfMonth();
                endDate = currentDate.AddMonths(1);
                break;
        }
        var newDataSource = AppointmentCollection.GetAppointments(startDate, endDate);
        DataStorage.AppointmentsSource = newDataSource;
        DataStorage.RefreshData();
    }
public static IEnumerable<Appointment> GetAppointments(DateTime startDate, DateTime endDate) {
            return GenerateAppointments().Where(p =>
                (p.StartDate >= startDate && p.EndDate <= endDate) ||       // start and end date are in the interval
                (p.StartDate >= startDate && p.StartDate <= endDate) ||     // start date is in the interval, but end date is not
                (p.EndDate >= startDate && p.EndDate <= endDate) ||         // end date is in the interval, but start date is not
                (p.StartDate < startDate && p.EndDate > endDate) ||         // appointment interval is larger than the selected interval 
                (p.AppointmentType != (int)SchedulerAppointmentType.OneTime)//always load all recurrent appointments
            );
        }
  1. Call the LoadAppointments method in the OnInitialized, StartDateChanged, and ActiveViewTypeChanged handlers:
 protected override void OnInitialized() {
        base.OnInitialized();
        LoadAppointments();
    }
    void OnStartDateChanged(DateTime newStartDate) {
        currentDate = newStartDate;
        LoadAppointments();
    }
    void OnActiveViewChanged(SchedulerViewType newView) {
        activeType = newView;
        LoadAppointments();
    }

Files to look at:

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)