How to bind JSON online data to WPF Scheduler (Calendar)
You can bind the online data from JSON to the WPF SfScheduler, 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 GetStringAsync method and Deserialize the JSON data as list of JSON data model and then add the JSON data list into the appointment collection (Meetings).
public class SchedulerViewModel : INotifyPropertyChanged
{
/// <summary>
/// collecions for meetings.
/// </summary>
private ObservableCollection<Meeting> meetings;
public DateTime DateTime { get; set; }
public SchedulerViewModel()
{
jsonDataCollection = new List<JSONData>();
GetInformation();
DateTime = new DateTime(2017, 06, 01);
}
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 = Brushes.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 changed.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Invoke method when property changed.
/// </summary>
/// <param name="propertyName">property name</param>
private void RaiseOnPropertyChanged(string propertyName)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
XAML
Bind appointments that collected through JSON online to a schedule using the Scheduler.ItemsSource property.
<Window.DataContext>
<local:SchedulerViewModel />
</Window.DataContext>
<Grid>
<syncfusion:SfScheduler x:Name="Schedule"
ItemsSource="{Binding Meetings}"
ViewType="Month" DisplayDate="{Binding DateTime}">
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:AppointmentMapping
EndTime="To"
StartTime="From"
Subject="EventName"
AppointmentBackground="color"
/>
</syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>
</Grid>
Output
