How to Load Appointments on Demand via Web Services in Xamarin.Forms Scheduler
Tags: android, ios, csharp, productivity
Published: 2019-11-12 12:31:34

---
title: How to Load Appointments on Demand via Web Services in Xamarin.Forms Scheduler
published: true
date: 2019-11-11 11:00:18 UTC
tags: android, ios, csharp, productivity
canonical_url: https://www.syncfusion.com/blogs/post/how-to-load-appointments-on-demand-via-web-services-in-xamarin-forms-scheduler.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/Blog_1x.png
---

When developing Xamarin applications for Android, iOS, and UWP platforms, the most prevalent requirement is the ability to access data from web services. The Syncfusion [Xamarin.Forms Scheduler](https://www.syncfusion.com/products/xamarin/scheduler) control provides all the common scheduling functionalities that allow users to load and bind appointments on-demand from web services as custom appointments using the mapping technique.

In this blog post, we are going to discuss loading appointments on demand via web services in the Xamarin.Forms Scheduler. If you are new to the Scheduler control, please read the [Getting Started](https://help.syncfusion.com/xamarin/sfschedule/getting-started) article in the documentation before proceeding.

## **Creating** a **web API service** 

Web services are server-side applications that are meant to serve data or logic to various client applications. REST and SOAP are the widely used industry-standard web service architectures. Refer to this [tutorial](https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.2&tabs=visual-studio) to create an ASP.NET Core web API service and host it for public access. For this demo, we are going to use this [hosted service](https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData).

## Creating **a model class**

Create a model class **Appointment** that contains a similar data structure to the web API service, containing the appointment’s subject, time, and other related information.

```csharp
/// <summary>   
/// Represents custom data properties.   
/// </summary> 
public class Appointment
{
    /// <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 a boolean property 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 color of the appointment. 
    /// </summary>
    public Color Color { get; set; }
}
```

## Fetching **data from a web API service**

In Xamarin, [HttpClient](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=netframework-4.8) provides a base class to send HTTP requests and receive HTTP responses from a web service identified by a URI. Create a helper class **WebAPIService** with an asynchronous method **RefreshDataAsync** and consume the API service URI. Use **GetAsync** on the base URL to retrieve the appointment data using [HttpClient](https://docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=netframework-4.8). Use the C# **await** option to consume the value easily. Pass the returned object into **JsonConvert.DeserializeObject** to convert the JSON data into a collection of appointments and return the data to the service caller.

```csharp
public class WebAPIService
{
    private HttpClient client; 
    private string WebAPIUrl { get; set; }
 
    public WebAPIService()
    {
        client = new HttpClient();
    }
 
    /// <summary>
    /// Asynchronously fetching the data from the web API service.
    /// </summary>
    /// <returns></returns>
    public async Task<ObservableCollection<Appointment>> RefreshDataAsync()
    {
        WebAPIUrl = "https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData";
        var uri = new Uri(WebAPIUrl);
        try
        {
            var response = await client.GetAsync(uri);
 
            if (response.IsSuccessStatusCode)
            {
                var content = await response.Content.ReadAsStringAsync();
                return JsonConvert.DeserializeObject<ObservableCollection<Appointment>>(content); 
            }
        }
        catch (Exception ex)
        {
        }
        return null;
    }
}
```

## **Binding** remote **data in Scheduler**

Scheduler appointments are an MVVM-friendly feature with complete data-binding support. This allows you to bind the data fetched from the web API service to load and manage appointments in the Scheduler control. Create a view model **SchedulerViewModel** with the asynchronous method **GetData** to invoke the service call and store the received data in the proper collection.

```csharp
public class SchedulerViewModel : INotifyPropertyChanged
{
    private WebAPIService webAPIService;
    private ObservableCollection<Appointment> appointments;
    private ObservableCollection<Appointment> webData;
    private List<Color> colorCollection;
    private List<DateTime> visibleDates;
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    /// <summary>
    /// Gets or sets the visible dates in Scheduler. 
    /// </summary>
    public List<DateTime> VisibleDates
    {
        get
        {
            return visibleDates;
        }
        set
        {
            this.visibleDates = value;
            RaisepropertyChanged("VisibleDates");
        }
    }
 
    /// <summary>
    /// Gets or sets the data fetched from web API service. 
    /// </summary>
    public ObservableCollection<Appointment> WebData
    {
        get
        {
            return webData;
        }
        set
        {
            webData = value;
            this.UpdateAppointments();
            RaisepropertyChanged("WebData");
        }
    }
 
    /// <summary>
    /// Gets or sets the appointments. 
    /// </summary>
    public ObservableCollection<Appointment> Appointments
    {
        get
        {
            return this.appointments;
        }
        set
        {
            this.appointments = value;
            RaisepropertyChanged("Appointments");
        }
    }
 
    public SchedulerViewModel()
    {
        this.webAPIService = new WebAPIService();
        this.Appointments = new ObservableCollection<Appointment>();
        this.InitializeEventColor();
        this.GetDataFromWebAPI();
    }
 
    private async void GetDataFromWebAPI()
    {
        this.WebData = await webAPIService.RefreshDataAsync();
 
        var random = new Random();
        foreach (var scheduleEvent in this.WebData)
        {
            //// Random color added for web appointments
            scheduleEvent.Color = this.colorCollection[random.Next(9)];
        }
    }
 
    private void InitializeEventColor()
    {
        this.colorCollection = new List<Color>();
        this.colorCollection.Add(Color.FromHex("#FF339933"));
        this.colorCollection.Add(Color.FromHex("#FF00ABA9"));
        this.colorCollection.Add(Color.FromHex("#FFE671B8"));
        this.colorCollection.Add(Color.FromHex("#FF1BA1E2"));
        this.colorCollection.Add(Color.FromHex("#FFD80073"));
        this.colorCollection.Add(Color.FromHex("#FFA2C139"));
        this.colorCollection.Add(Color.FromHex("#FFA2C139"));
        this.colorCollection.Add(Color.FromHex("#FFD80073"));
        this.colorCollection.Add(Color.FromHex("#FF339933"));
        this.colorCollection.Add(Color.FromHex("#FFE671B8"));
        this.colorCollection.Add(Color.FromHex("#FF00ABA9"));
    }
 
    private void RaisepropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
```

You can bind custom data with the Scheduler component by using the mapping technique. Map the properties of custom appointments with the equivalent properties of the **ScheduleAppointmentMapping** class. Now, set the **SchedulerViewModel** to the **BindingContext** of the Scheduler to bind **SchedulerViewModel** properties to the Scheduler and assign the received appointment collection as the **DataSource** for the Scheduler.

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"
             xmlns:local="clr-namespace:OnDemandLoading_Scheduler"
             x:Class="OnDemandLoading_Scheduler.SchedulerPage">
    <ContentPage.Content>
        <syncfusion:SfSchedule x:Name="schedule"
                               ScheduleView = "MonthView"
                               DataSource = "{Binding Appointments}" >
 
            <syncfusion:SfSchedule.AppointmentMapping>
                <syncfusion:ScheduleAppointmentMapping
                         SubjectMapping="Subject"
                         StartTimeMapping="StartTime"
                         EndTimeMapping="EndTime"
                         IsAllDayMapping="AllDay"
                         ColorMapping="Color"
                         RecurrenceRuleMapping="RecurrenceRule"/>
            </syncfusion:SfSchedule.AppointmentMapping>
 
            <syncfusion:SfSchedule.MonthViewSettings>
                <syncfusion:MonthViewSettings AppointmentDisplayMode="Appointment" />
            </syncfusion:SfSchedule.MonthViewSettings>
 
            <syncfusion:SfSchedule.BindingContext>
                <local:SchedulerViewModel />
            </syncfusion:SfSchedule.BindingContext>
 
        </syncfusion:SfSchedule>
    </ContentPage.Content>
 
    <ContentPage.Behaviors>
        <local:SchedulerPageBehavior/>
    </ContentPage.Behaviors>
 
</ContentPage>
```

## Loading **appointments on demand**

Initially, you can load filtered appointments in the visible date range for all the Scheduler views. You can also update the appointments in the Scheduler when data is asynchronously changed on the web.

```csharp
/// <summary>
/// Gets or sets the data fetched from a web API service. 
/// </summary>
public ObservableCollection<Appointment> WebData
{
    get
    {
        return webData;
    }
    set
    {
        webData = value;
        this.UpdateAppointments();
        RaisepropertyChanged("WebData");
    }
}
 
       …
 
/// <summary>
/// Updates the appointment collection property to load appointments on demand.
/// </summary>
public void UpdateAppointments()
{
    if (this.visibleDates == null)
        return;
 
    if (this.webData == null || this.webData.Count == 0)
        return;
 
    var appointments = new ObservableCollection<Appointment>();
 
    foreach (Appointment App in this.webData)
    {
        if ((this.visibleDates.First() <= App.StartTime.Date && this.visibleDates.Last() >= App.StartTime.Date)  ||
            (this.visibleDates.First() <= App.EndTime.Date && this.visibleDates.Last() >= App.EndTime.Date))
        {
            appointments.Add(App);
        }
    }
 
    this.Appointments = appointments;
}
```

When swiping a view, you can update the filtered appointments in the visible date range by using the **VisibleDatesChangedEvent** of the Scheduler control.

```csharp
this.schedule.VisibleDatesChangedEvent += OnVisibleDatesChangedEvent;
 
        …
 
private void OnVisibleDatesChangedEvent(object sender, VisibleDatesChangedEventArgs e)
{
    if (schedule.BindingContext == null)
        return;
 
    var scheduleViewModel = schedule.BindingContext as SchedulerViewModel;
    scheduleViewModel.VisibleDates = e.visibleDates;
    scheduleViewModel.UpdateAppointments();
}
```

Now, the Scheduler control is configured with an application to load appointments on-demand via a web API service. Just running the sample with the previous steps will render the Scheduler with appointments.

![Scheduler loaded with appointments via web API service](https://www.syncfusion.com/blogs/wp-content/uploads/2019/11/Scheduler-loaded-with-appointments-via-web-API-service.png)<figcaption>Scheduler loaded with appointments via web API service</figcaption>

## Conclusion

In this blog post, we’ve discussed loading appointments on demand via web services in the [Xamarin.Forms Scheduler](https://www.syncfusion.com/products/xamarin/scheduler). You can also check out our project samples in [this GitHub repository](https://github.com/SyncfusionExamples/schedule-ondemand-loading-remote-data-xamarin-forms). Feel free to try out this sample and share your feedback or questions in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/). We are happy to assist you.

## Reference

[https://www.syncfusion.com/blogs/post/consume-asp-net-core-web-api-in-xamarin.aspx](https://dev.to/vijays/6-steps-to-consume-asp-net-core-web-api-in-xamarin-applications-llf-temp-slug-7972346)

The post [How to Load Appointments on Demand via Web Services in Xamarin.Forms Scheduler](https://www.syncfusion.com/blogs/post/how-to-load-appointments-on-demand-via-web-services-in-xamarin-forms-scheduler.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).