How to bind offline JSON data to WinUI Scheduler (Calendar)
Bind the 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; }
public string IsAllDay { get; set; }
}
Note:
Convert String type into DateTime type when adding items to the local collection from JSON data model, since JSON does not support DateTime type.
C#
Create the JSON data for the data model.
// Add data for JSON Data model
private string JsonData =
"[{\"Subject\": \"General Meeting\",\"StartTime\": \"30-11-2020 15:00:00\",\"EndTime\":\"30-11-2020 16:00:00\", \"IsAllDay\":\"True\"}, " +
"{\"Subject\": \"Plan Execution\",\"StartTime\": \"22-11-2020 10:00:00\",\"EndTime\":\"22-11-2020 11:00:00\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Performance Check\",\"StartTime\": \"17-11-2020 17:00:00\",\"EndTime\":\"17-11-2020 18:00:00\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Consulting\",\"StartTime\": \"03-11-2020 9:00:00\",\"EndTime\":\"03-11-2020 11:00:00\", \"IsAllDay\":\"True\"}," +
"{\"Subject\": \"Yoga Therapy\",\"StartTime\": \"27-11-2020 10:00:00\",\"EndTime\":\"27-11-2020 11:00:00\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Project Plan\",\"StartTime\": \"30-11-2020 15:00:00\",\"EndTime\":\"30-11-2020 16:00:00\", \"IsAllDay\":\"False\"} ]";
C#
Deserialize the JSON data as a list of JSON data models.
List<JSONData> jsonDataCollection = JsonConvert.DeserializeObject<List<JSONData>>(jsonData);
C#
Create another class Meeting other than the JSON data model class for the appointment mapping, since the JSON data model class does not support certain data types.
public class Meeting
{
public string EventName { get; set; }
public DateTime From { get; set; }
public DateTime To { get; set; }
public bool AllDay { get; set; }
}
C#
Add the JSON data list into the appointment collection (Meetings).
public SchedulerViewModel()
{
Meetings = new ObservableCollection<Meeting>();
List<JSONData> jsonDataCollection = JsonConvert.DeserializeObject<List<JSONData>>(JsonData);
foreach (var data in jsonDataCollection)
{
Meetings.Add(new Meeting()
{
EventName = data.Subject,
From = DateTime.Parse(data.StartTime, System.Globalization.CultureInfo.GetCultureInfo("hi-IN").DateTimeFormat),
To = DateTime.Parse(data.EndTime, System.Globalization.CultureInfo.GetCultureInfo("hi-IN").DateTimeFormat),
AllDay = Convert.ToBoolean(data.IsAllDay)
});
}
}
XAML
Bind the appointments that are collected through the JSON data to a schedule using the ItemsSource property.
<syncfusion:SfScheduler x:Name="Schedule"
ItemsSource="{Binding Meetings}"
ViewType="Month">
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:AppointmentMapping
EndTime="To"
StartTime="From"
Subject="EventName"
IsAllDay="AllDay" />
</syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>
