Load Appointments on Demand via Web Services in .NET MAUI Scheduler Using JSON Data
Tags: dotnetmaui, development, mobile, scheduler
Published: 2023-10-29 14:50:55

---
title: Load Appointments on Demand via Web Services in .NET MAUI Scheduler Using JSON Data
published: true
date: 2023-10-18 15:09:53 UTC
tags: dotnetmaui, development, mobile, scheduler
canonical_url: https://www.syncfusion.com/blogs/post/on-demand-loading-web-service-dotnet-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/advx93019bg10x7lowe8.png
---
The [.NET MAUI Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler") provides all the scheduling functionalities to create and manage professional and personal appointments. This blog explains how to load appointments on demand in the **.NET MAUI Scheduler** control via web services using JSON data.

Let’s get started!

## Creating a web data model

First, we need to [create a .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?tabs=vswin&pivots=devices-android "Building your first .NET MAUI app") and a web data model to get the appointment information from a web service.  

Refer to the following code example.

```charp
public class WebData
{
    public string Subject { get; set; }
    public string StartTime { get; set; }
    public string EndTime { get; set; }
}
```

## **Creating a web API service and fetching data from it**

We can get the online JSON data with the help of the [GetStringAsync](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient.getstringasync?view=netcore-3.1#System_Net_Http_HttpClient_GetStringAsync_System_Uri_ "GetStringAsync method of .NET MAUI Framework") method and [deserialize](https://www.newtonsoft.com/json/help/html/DeserializeObject.htm "Deserialize an object") it as a list of **WebData** models. We will use the [hosted service](https://services.syncfusion.com/js/production/api/schedule "Hosted Service") as an example.

Refer to the following code example to deserialize JSON web data.

**SchedulerViewModel.cs**

```csharp
private async Task<List<WebData>> GetJsonWebData()
{
    var httpClient = new HttpClient();
    var response = await httpClient.GetStringAsync("https://services.syncfusion.com/js/production/api/schedule");
    return JsonConvert.DeserializeObject<List< WebData >>(response);
}
```

## Load appointments on demand via web service in .NET MAUI Scheduler

Let’s load the deserialized data into the Syncfusion .NET MAUI Scheduler control on demand.

**Note:** Before proceeding, please read the getting started with [.NET MAUI Scheduler documentation](https://help.syncfusion.com/maui/scheduler/getting-started "Getting started with .NET MAUI Scheduler").

### Step 1: Register the handler

We register the handler for Syncfusion core in the **MauiProgram.cs** file.

```csharp
Public static MauiApp CreateMauiApp()
{
     var builder = MauiApp.CreateBuilder();
     builder.ConfigureSyncfusionCore();
}
```

### Step 2: Creating an appointment model class

Next, we create the appointment **Event** data model class containing basic information to generate the appointments.

Refer to the following code example.

**Event.cs**

```csharp
public class Event : INotifyPropertyChanged
{
    private DateTime from;
    private DateTime to;
    private bool isAllDay;
    private string eventName;
    private Brush background;

    /// <summary>
    /// Gets or sets the value to display the start date.
    /// </summary>
    public DateTime From
    {
        get
        { return this.from; }
        set
        {
           this.from = value;
           this.OnPropertyChanged(nameof(From));
        }
    }

    /// <summary>
    /// Gets or sets the value to display the end date.
    /// </summary>
    public DateTime To
    {
        get { return this.to; }
        set
        {
            this.to = value;
            this.OnPropertyChanged(nameof(To));
        }
     }

     /// <summary>
     /// Gets or sets the value indicating whether the appointment is all day or not.
     /// </summary>
     public bool IsAllDay
     {
        get { return this.isAllDay; }
        set
        {
            this.isAllDay = value;
            this.OnPropertyChanged(nameof(IsAllDay));
        }
     }

     /// <summary>
     /// Gets or sets the value to display the subject.
     /// </summary>
     public string EventName
     {
        get { return this.eventName; }
        set { this.eventName = value; }
     }

     /// <summary>
     /// Gets or sets the value to display the background.
     /// </summary>
     public Brush Background
     {
        get { return this.background; }
        set { this.background = value; }
     }

     public event PropertyChangedEventHandler? PropertyChanged;

     private void OnPropertyChanged(string propertyName)
     {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
     }
}
```

### **Step 3: Create the appointments**

Following that, we’ll look at creating an Events collection from online data retrieved via the web service.

You can load appointments [on demand](https://help.syncfusion.com/maui/scheduler/load-on-demand "Load on demand in .NET MAUI Event Scheduler") with a loading indicator based on the Scheduler’s visible date range. We can improve the appointment loading performance using the [QueryAppointmentsCommand](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html#Syncfusion_Maui_Scheduler_SfScheduler_QueryAppointmentsCommand "QueryAppointmentsCommand property of .NET MAUI Scheduler") property.

Refer to the following code example to retrieve web appointments in the view model class.

**SchedulerViewModel.cs**

```csharp
public ICommand QueryAppointmentsCommand { get; set; }

private ObservableCollection<Event> events;
public ObservableCollection<Event> Events
{
    get
    {
        return this.events;
    }
    set
    {
        this.events = value;
    }
}

public SchedulerViewModel()
{
    this.QueryAppointmentsCommand = new Command<object>(LoadAppointments);
}

private async void LoadAppointments(object obj)
{
    //// Get appointment details from the web service.
    if (jsonWebData == null)
        jsonWebData = await GetJsonWebData();

    Random random = new Random();
    var visibleDates = ((SchedulerQueryAppointmentsEventArgs)obj).VisibleDates;
    this.Events = new ObservableCollection<Event>();
    this.ShowBusyIndicator = true;

    DateTime visibleStartDate = visibleDates.FirstOrDefault();
    DateTime visibleEndDate = visibleDates.LastOrDefault();

    foreach (var data in jsonWebData)
    {
       DateTime startDate = Convert.ToDateTime(data.StartTime);
       DateTime endDate = Convert.ToDateTime(data.EndTime);

       if ((visibleStartDate <= startDate.Date && visibleEndDate >= startDate.Date) ||
          (visibleStartDate <= endDate.Date && visibleEndDate >= endDate.Date))
       {
          Events.Add(new Event()
          {
              EventName = data.Subject,
              From = startDate,
              To = endDate,
              Background = this.colors[random.Next(this.colors.Count)]
          });
       }
    }

    if (jsonWebData != null)
        await Task.Delay(1000);

    this.ShowBusyIndicator = false;
}
```

## **Step 4: Bind appointments to the Scheduler**

Let’s initialize the .NET MAUI Scheduler control.

**MainPage.xaml**

```xml
xmlns:scheduler="clr-namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler"

<scheduler:SfScheduler/>
```

Next, we bind the custom data **Events** to the .NET MAUI Scheduler’s [AppointmentsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html#Syncfusion_Maui_Scheduler_SfScheduler_AppointmentsSource "AppointmentsSource property of .NET MAUI Scheduler") using the [appointment mapping](https://help.syncfusion.com/maui/scheduler/appointments#scheduler-appointment-source-mapping "Scheduler appointment source mapping") feature.

Refer to the following code example to bind the **QueryAppointmentsCommand** and **AppointmentsSource** properties from the **SchedulerViewModel** class.

**MainPage.xaml**

```xml
<scheduler:SfScheduler View="Month" 
                       QueryAppointmentsCommand="{Binding QueryAppointmentsCommand}"
                       AppointmentsSource="{Binding Events}">
 <scheduler:SfScheduler.AppointmentMapping>
  <scheduler:SchedulerAppointmentMapping Subject="EventName"
                                         StartTime="From"
                                         EndTime="To"
                                         Background="Background"
                                         IsAllDay="IsAllDay" />
 </scheduler:SfScheduler.AppointmentMapping>
 <scheduler:SfScheduler.BindingContext>
  <local:SchedulerViewModel/>
 </scheduler:SfScheduler.BindingContext>
</scheduler:SfScheduler>
```

After executing the previous code examples, we’ll get output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/10/Loading-appointments-on-demand-via-web-services-in-.NET-MAUI-Scheduler-using-JSON-data.gif" alt="Loading appointments on demand via web services in .NET MAUI Scheduler using JSON data" style="width:100%">

  <figcaption>Loading appointments on demand via web services in .NET MAUI Scheduler using JSON data</figcaption>

</figure>

## GitHub reference

For more details, refer to the example for [loading appointments on demand via web services in .NET MAUI Scheduler using JSON](https://github.com/SyncfusionExamples/Load-.NET-MAUI-Scheduler-appointments-using-JSON-data "Load appointments on demand via web services in .NET MAUI Scheduler GitHub demo") data on GitHub.

## Conclusion

Thanks for reading! In this blog, we learned how to load appointments on demand in the [.NET MAUI Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler") control via web services. With this, you can load only the required appointments on demand and considerably enhance the loading performance of your app. Try out the steps and leave your feedback in the comments section below!

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page"). If you are not a customer yet, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to check out these new features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/maui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Introducing .NET MAUI Pickers for Efficient User Interactions](https://www.syncfusion.com/blogs/post/new-dotnet-maui-pickers.aspx "Blog: Introducing .NET MAUI Pickers for Efficient User Interactions")
- [Introducing the New .NET MAUI TreeView Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-treeview.aspx "Blog: Introducing the New .NET MAUI TreeView Control")
- [Chart of the Week: Creating a .NET MAUI Range Column Chart to Compare Average Temperature Variations in Rome](https://www.syncfusion.com/blogs/post/dotnet-maui-range-column-chart-compare-temperature-variations.aspx "Blog: Chart of the Week: Creating a .NET MAUI Range Column Chart to Compare Average Temperature Variations in Rome")
- [Introducing the .NET MAUI Segmented Control for Effortless Selection](https://www.syncfusion.com/blogs/post/dotnet-maui-segmented-control.aspx "Blog: Introducing the .NET MAUI Segmented Control for Effortless Selection")