Load Appointments on Demand via Web Services in .NET MAUI Scheduler Using JSON Data

Jollen Moyani - Oct 29 '23 - - Dev Community

The .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 and a web data model to get the appointment information from a web service.

Refer to the following code example.

public class WebData
{
    public string Subject { get; set; }
    public string StartTime { get; set; }
    public string EndTime { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Creating a web API service and fetching data from it

We can get the online JSON data with the help of the GetStringAsync method and deserialize it as a list of WebData models. We will use the hosted service as an example.

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

SchedulerViewModel.cs

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Step 1: Register the handler

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

Public static MauiApp CreateMauiApp()
{
     var builder = MauiApp.CreateBuilder();
     builder.ConfigureSyncfusionCore();
}
Enter fullscreen mode Exit fullscreen mode

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

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));
     }
}
Enter fullscreen mode Exit fullscreen mode

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 with a loading indicator based on the Scheduler’s visible date range. We can improve the appointment loading performance using the QueryAppointmentsCommand property.

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

SchedulerViewModel.cs

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;
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Bind appointments to the Scheduler

Let’s initialize the .NET MAUI Scheduler control.

MainPage.xaml

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

<scheduler:SfScheduler/>
Enter fullscreen mode Exit fullscreen mode

Next, we bind the custom data Events to the .NET MAUI Scheduler’s AppointmentsSource using the appointment mapping feature.

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

MainPage.xaml

<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>
Enter fullscreen mode Exit fullscreen mode

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

Loading appointments on demand via web services in .NET MAUI Scheduler using JSON data

Loading appointments on demand via web services in .NET MAUI Scheduler using JSON data

GitHub reference

For more details, refer to the example for loading appointments on demand via web services in .NET MAUI Scheduler using JSON data on GitHub.

Conclusion

Thanks for reading! In this blog, we learned how to load appointments on demand in the .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. If you are not a customer yet, try our 30-day free trial to check out these new features.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
Como Criptografar um Volume EBS Existente

aws, ebs, kms, community
Image
DEVOPS Mastery: Automating PHP Web app Deployment with GitHub Actions, AWS, and Ansible

devops, ansible, aws, githubactions
Image
How Redis works(deep dive)

redis, systemdesign, interview
Image
Shortcomings of Current Smart City Platforms and Their Role in Sustainable & Resilient Cities

trans, techtalks, devdiscuss, pwl
Image
In 𝐊𝐮𝐛𝐞𝐫𝐧𝐞𝐭𝐞𝐬 , Do you know the difference between 𝐕𝐨𝐥𝐮𝐦𝐞 𝐁𝐢𝐧𝐝𝐢𝐧𝐠 and 𝐕𝐨𝐥𝐮𝐦𝐞 𝐌𝐨𝐮𝐧𝐭𝐢𝐧𝐠 ?

kubernetes, devops, cloudnative
Image
CREDIT Go loan--App CUSTOMER Care HELPLINE Number _₹))_(+9007809540-))&&0-98317'56269__//call now l
Image
Deploying Nginx with Self-Signed TLS Using Helm and Minikube (Dev & Staging Environments)

nginx, devops, kubernetes, development
Image
CREDIT Go loan--App CUSTOMER Care HELPLINE Number _₹))_(+9007809540-))&&0-98317'56269__//call now ll
Image
Replit saytidagi shell buyruqlari haqida

coding, discuss, beginners, tutorial
Image
CREDIT Go loan--App CUSTOMER Care HELPLINE Number _₹))_(+9007809540-))&&0-98317'56269__//call now
Image
Deep Learning and Machine Learning in Space Networks

basic, machinelearning
Image
Dynamically create option in select element

webdev, javascript, programming, beginners
Image
🚀 Your Daily Crypto Job Digest For 20 October!! 🚀

hiring, whoishiring, web3
Image
How to get rid of fake followers on X (Twitter)

twitter, opensource, browser, extensions
Image
Background color change video

webdev, javascript, beginners, programming
Image
Intro to EVM II
Image
Witchy Hex Batch Introduction

organic, ecosystems, opensource
Image
Create and Release a Private Python Package on GitHub

python, pip, git, github
Image
Understanding APIs: Top 5 APIs Every Developer Should Know

api, webdev, programming, developers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .