How to Load Appointments on Demand via Web Services in WPF Scheduler
Tags: dotnet, csharp, wpf
Published: 2021-05-10 11:57:09

---
title: How to Load Appointments on Demand via Web Services in WPF Scheduler
published: true
date: 2021-05-10 10:04:32 UTC
tags: dotnet, csharp, wpf
canonical_url: https://www.syncfusion.com/blogs/post/load-appointments-on-demand-via-web-services-in-wpf-scheduler.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwrdt2l2ldawtnq8yjun.png
---

The Syncfusion [WPF Scheduler control](https://www.syncfusion.com/wpf-ui-controls/scheduler "Link to the WPF Scheduler") provides all the common scheduling functionalities to create and manage day-to-day business and personal appointments. When we develop WPF applications, some of the most prevalent requirements are the ability to reduce loading time and system resource consumption.

WPF Scheduler has built-in UI virtualization for better loading and view navigation performance. But that alone won’t be enough when you’re dealing with millions of events spanning multiple years. That’s where data virtualization (on-demand loading) comes in. You can provide data to the Scheduler for a single date range instead of loading all the data for multiple years.

In this blog, we are going to discuss loading appointments on demand via web services in the WPF Scheduler control. This will improve your application’s loading performance while fetching data. If you are new to the Scheduler control, please read the [Getting Started](https://help.syncfusion.com/wpf/scheduler/getting-started "Link to the WPF Scheduler getting started documentation") article in the Scheduler documentation before proceeding.

## **Creating a web API service** 

Web services are the server-side applications that are meant to serve data or logic to various client applications. REST and SOAP are the most widely used industry-standard web service architectures.

Use the following [reference](https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.2&tabs=visual-studio "Link to the Microsoft tutorial on creating a web API with ASP.NET Core") to create an ASP.NET Core Web API service and host it for public access. For demo purposes, we are going to use the following [hosted service](https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData "Link to the hosted service").

## **Fetching data from Web API service**

1. Create an asynchronous method  **GetAppointmentsAsync** and consume the API service URI.
2. Use the  **GetAsync** method of [HttpClient](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=netframework-4.8 "Link to Microsoft documentation on HttpClient class") to retrieve the appointment data as JSON.
3. Modify the received JSON data into a list of appointments.
```csharp
public static class WebAPIService
    {
        /// <summary>
        /// Asynchronously fetching the data from the Web API service.
        /// </summary>
        /// <returns></returns>
        public static async Task<ObservableCollection<Event>> GetAp-pointmentsAsync()
        {
            var uri = new Uri("https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData");
            try
            {
                var client = new HttpClient();
                var response = await client.GetAsync(uri);

                if (response.IsSuccessStatusCode)
                {
                    var content = await response.Content.ReadAsStringAsync();
                    return (JsonConvert.DeserializeObject<ObservableCollection<Event>>(content));
                }
            }
            catch (Exception ex)
            {
            }
            return null;
        }
    }
```

## **Creating a model class**

Create a model class **Event** with a data structure similar to that of the data in the Web API service. Here, it should contain the appointment subject, time, and other related information.

```csharp
/// <summary>   
/// Represents custom appointment properties.   
/// </summary> 
public class Event
{
   /// <summary>
   /// Gets or sets the subject of the appointment. 
   /// </summary>
   public string Subject { get; set; }

   /// <summary>
   /// Gets or sets the ID of the appointment. 
   /// </summary>
   public string Id { get; set; }

   /// <summary>
   /// Gets or sets the start time of the appointment. 
   /// </summary>
   public DateTime StartTime { get; set; }

   /// <summary>
   /// Gets or sets the end time of the appointment. 
   /// </summary>
   public DateTime EndTime { get; set; }

   /// <summary>
   /// Gets or sets the value that indicates whether the appointment is all day. 
   /// </summary>
   public bool AllDay { get; set; }

   /// <summary>
   /// Gets or sets the recurrence rule of the appointment. 
   /// </summary>
   public string RecurrenceRule { get; set; }

   /// <summary>
   /// Gets or sets the background color of the appointment. 
   /// </summary>
   public Brush Color { get; set; }
 }
```

## **Binding data to Scheduler**

Create a view model  **SchedulerViewModel**  with the command property [**LoadOnDemandCommand**](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_LoadOnDemandCommand "Link to LoadOnDemandCommand in WPF Scheduler API reference") to fetch appointments on demand.

```csharp
public class SchedulerViewModel : NotificationObject
{
    private ObservableCollection<Event> events;
    private bool showBusyIndicator;

    /// <summary>
    /// Gets or sets load on demand command.
    /// </summary>
    public ICommand LoadOnDemandCommand { get; set; }

    /// <summary>
    /// Gets or sets web appointments data.
    /// </summary>
    public ObservableCollection<Event> WebData { get; set; }

    /// <summary>
    /// Gets or sets a value indicating whether to show the busy indicator.
    /// </summary>
    public bool ShowBusyIndicator
    {
       get { return this.showBusyIndicator; }
       set
       {
           this.showBusyIndicator = value;
           this.RaisePropertyChanged("ShowBusyIndicator");
        }
    }

    /// <summary>
    /// Gets or sets the events. 
    /// </summary>
    public ObservableCollection<Event> Events
    {
       get { return this.events; }
       set
       {
           this.events = value;
           this.RaisePropertyChanged("Events");
       }
     }

    public SchedulerViewModel()
    {
       this.Events = new ObservableCollection<Event>();
       this.LoadOnDemandCommand = new DelegateCommand(ExecuteOnDemandLoading, CanExecuteOnDemandLoading);            
    }
}
```

You can bind the custom appointment data with the Scheduler component using a mapping technique. Map the properties of the **Event** class with the relevant properties of [**AppointmentMapping**](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.AppointmentMapping.html "Link to the AppointmentMapping class in WPF Scheduler API reference") class. Now, set the **DataContext** as **SchedulerViewModel**.

```html
<Grid.DataContext>
  <local:SchedulerViewModel/>
</Grid.DataContext>

<syncfusion:SfScheduler x:Name="scheduler"
                        ViewType="Month"
                        ItemsSource="{Binding Events}"
                        ShowBusyIndicator="{Binding ShowBusyIndicator}"
                        LoadOnDemandCommand="{Binding LoadOnDemandCommand}">
           
<syncfusion:SfScheduler.AppointmentMapping>
  <syncfusion:AppointmentMapping
              Subject="Subject"
              StartTime="StartTime"
              EndTime="EndTime"
              IsAllDay="AllDay"
              AppointmentBackground="Color"
              RecurrenceRule="RecurrenceRule"/>
  </syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>
```

## **Loading appointments on demand**

The Scheduler supports [loading appointments on demand](https://help.syncfusion.com/wpf/scheduler/loadondemand "Link to load on demand feature in WPF Scheduler") with a busy indicator. This improves the loading performance when you have appointments for multiple years.

The Scheduler control has [**LoadOnDemandCommand**](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_LoadOnDemandCommand "Link to LoadOnDemandCoomand in WPF Scheduler API reference") to load appointments on demand. While loading appointments as JSON data, we can show a busy indicator by using the [**ShowBusyIndicator**](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ShowBusyIndicator "Link to ShowBusyIndicator in WPF Scheduler API reference") property.

You can get the current visible date range from the command argument of [**LoadOnDemandCommand**](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_LoadOnDemandCommand "Link to LoadOnDemandCoomand in WPF Scheduler API reference"), fetch the appointments for the current visible date range, and update the **Events** property that is bound with the Scheduler **ItemsSource**.

```csharp
public class SchedulerViewModel : NotificationObject
{
    …

    /// <summary>
    /// Method to execute load on demand command and set scheduler appointments.
    /// </summary>
    /// <param name="queryAppointments">QueryAppointmentsEventArgs object.</param>
    public async void ExecuteOnDemandLoading(object queryAppointments)
    {
        this.ShowBusyIndicator = true;
        await this.GetVisibleRangeAppointments((queryAppointments as QueryAp-pointmentsEventArgs).VisibleDateRange);
        this.ShowBusyIndicator = false;
    } 

    /// <summary>
    /// Method to check whether the load on demand command can be invoked or not.
    /// </summary>
    /// <param name="queryAppointments">QueryAppointmentsEventArgs object.</param>
    private bool CanExecuteOnDemandLoading(object queryAppointments)
    {
        return true;
    }

    /// <summary>
    /// Method to get web appointments and update them to scheduler ItemsSource.
    /// </summary>
    /// <param name="visibleDateRange">Current visible date range.</param>
    private async Task GetVisibleRangeAppointments(DateRange visibleDateRange)
    {
        if (this.WebData == null)
        {
           this.WebData = await WebAPIService.GetAppointmentsAsync();
        }

        var events = new ObservableCollection<Event>();
        foreach (Event appointment in this.WebData)
        {
           if ((visibleDateRange.StartDate <= appointment.StartTime.Date && visibleDateRange.EndDate >= appointment.StartTime.Date) ||
                (visibleDateRange.StartDate <= appointment.EndTime.Date && visibleDateRange.EndDate >= appointment.EndTime.Date))
           {
              events.Add(appointment);
           }
         }

         this.Events = events;
     }

}
```

Now, the Scheduler control is configured to load appointments on demand. Running the [sample](https://github.com/SyncfusionExamples/load-appointments-on-demand-via-web-services-in-wpf-scheduler "Link to Load appointments on demand via web services in WPF Scheduler demo on GitHub") with the previous steps will render a scheduler with appointments.

## **![Load Appointments on Demand via Web Services in WPF Scheduler](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Output.gif)Resource**

For more information, refer to [Load appointments on demand via web services in WPF Scheduler demo](https://github.com/SyncfusionExamples/load-appointments-on-demand-via-web-services-in-wpf-scheduler "Link to Load appointments on demand via web services in WPF Scheduler demo on GitHub").

## **Conclusion**

In this blog post, we’ve discussed loading appointments on demand in the [WPF Scheduler](https://www.syncfusion.com/wpf-ui-controls/scheduler "Link to the WPF Scheduler") control. You can also check out our project samples in this [GitHub](https://github.com/syncfusion/wpf-demos "Link to Syncfusion WPF demos on GitHub") repository. Feel free to try out this sample and share your feedback or questions in the comments section.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you.

## Related blogs

- [Blog] [How to Display Alerts for Appointments in WPF Scheduler](https://dev.to/syncfusion/how-to-display-alerts-for-appointments-in-wpf-scheduler-28oe)
- [Blog] [Introducing WPF Item Template Support for Visual Studio](https://dev.to/sureshmohan/introducing-wpf-item-template-support-for-visual-studio-1mea-temp-slug-6610631)
- [Blog] [6 Incredible Features of WPF AutoComplete Text Box](https://dev.to/syncfusion/6-incredible-features-of-wpf-autocomplete-text-box-541p)
- [Blog] [How to Achieve Visual Studio-Like Layout State Persistence in WPF](https://dev.to/syncfusion/how-to-achieve-visual-studio-like-layout-state-persistence-in-wpf-3fmp)