How to bind JSON online data to WinUI Scheduler (Calendar)
Bind the online data from JSON to the WinUI Scheduler appointments.
C#
Create a JSON data model.
public class JSONData
{
public string Subject { get; set; }
public string StartTime { get; set; }
public string EndTime { get; set; }
}
C#
Create a custom class Meeting with mandatory fields “From, To, EventName and Color”.
public class Meeting
{
public string EventName { get; set; }
public DateTime From { get; set; }
public DateTime To { get; set; }
public Brush Color { get; set; }
}
C#
Get the online JSON data with the help of the GetStringAsync method, and Deserialize the JSON data as a list of JSON data models, and then add the JSON data list into the appointment collection (Meetings).
public class SchedulerViewModel : INotifyPropertyChanged
{
/// <summary>
/// Collections for meetings.
/// </summary>
private ObservableCollection<Meeting> meetings;
public SchedulerViewModel()
{
jsonDataCollection = new List<JSONData>();
GetInformation();
}
private async void GetInformation()
{
var httpClient = new HttpClient();
var response = await httpClient.GetStringAsync("https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData");
jsonDataCollection = JsonConvert.DeserializeObject<List<JSONData>>(response);
this.Meetings = new ObservableCollection<Meeting>();
foreach (var data in jsonDataCollection)
{
Meetings.Add(new Meeting()
{
EventName = data.Subject,
From = Convert.ToDateTime(data.StartTime),
To = Convert.ToDateTime(data.EndTime),
color = new SolidColorBrush(Colors.Red)
});
}
}
private List<JSONData> jsonDataCollection;
/// <summary>
/// Gets or sets meetings.
/// </summary>
public ObservableCollection<Meeting> Meetings
{
get
{
return this.meetings;
}
set
{
this.meetings = value;
this.RaiseOnPropertyChanged("Meetings");
}
}
/// <summary>
/// Occurs when property is changed.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Invoke method when property is changed.
/// </summary>
/// <param name="propertyName">property name</param>
private void RaiseOnPropertyChanged(string propertyName)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
XAML
Bind the appointments that are collected through the JSON online to a schedule using the Scheduler.ItemsSource property.
<Grid>
<Grid.DataContext>
<local:SchedulerViewModel/>
</Grid.DataContext>
<scheduler:SfScheduler
x:Name="Schedule"
ViewType="Month"
ItemsSource="{Binding Meetings}">
<scheduler:SfScheduler.AppointmentMapping>
<scheduler:AppointmentMapping
EndTime="To"
StartTime="From"
Subject="EventName"
AppointmentBackground="Color"/>
</scheduler:SfScheduler.AppointmentMapping>
</scheduler:SfScheduler>
</Grid>
