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
AcadémieDeVoyage est la première école québécoise spécialisée
Image
Setting Up Tailwind in React Native SDK 51 with NativeWind

reactnative, react, nativewind, javascript
Image
Penyiapan Simple Buat Buat Account Bandar Judi Online
Image
Choosing Between Single Oven Gas and Electric Ovens
Image
Cisza za Ścianą: Sztuka Wyciszania Twojego Domu
Image
The Most Hilarious Complaints We've Seen About Accident Lawyers Firm
Image
Custom Kitchen Design for Good Space
Image
Creating Effective Customized Infection Control Plans for Healthcare Settings

mentalhealth, healthcare, infectioncontrol, customizedinfectioncontrol
Image
Cat Flap Double Glazing
Image
Meme Monday

discuss, watercooler, jokes
Image
Adding a Composite Door Cat Flap
Image
kelebihan permainan slots online tembak ikan
Image
Transforming JSON with AI: Dynamic Processing vs. Filter Generation

medium, repost
Image
Mengapa Sbobet Semakin Hari Kian Popular Saja?
Image
15 Surprising Facts About Accident Lawyer Phoenix
Image
Buying a Single Oven Electric
Image
isclose and equal in PyTorch

python, pytorch, isclose, equal
Image
Cisza w Mieszkaniu: Jak Wyciszyć Swoje Przestrzenie Życiowe?
Image
eq and ne in PyTorch

python, pytorch, eq, ne
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .