Category / Section
How to bind JSON data to Schedule?
1 min read
How to bind JSON data to Schedule?
You can bind data to the schedule appointments from JSON by following the steps:
- Create a JSON data model.
C#
/// <summary>
/// Represents custom data properties.
/// </summary>
public class JSONData
{
public string Subject { get; set; }
public string StartTime { get; set; }
public string EndTime { get; set; }
public string IsAllDay { get; set; }
public string Background { 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.
- Create data for the data model.
C#
// Add data for JSON Data model
private string jsonData =
"[{\"Subject\": \"General Meeting\",\"StartTime\": \"30-08-2018 15:00:00\",\"EndTime\":\"30-08-2018 16:00:00\",\"Background\":\"#5944dd\", \"IsAllDay\":\"True\"}, " +
"{\"Subject\": \"Plan Execution\",\"StartTime\": \"22-08-2018 10:00:00\",\"EndTime\":\"22-08-2018 11:00:00\",\"Background\":\"#ff0000\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Performance Check\",\"StartTime\": \"17-08-2018 17:00:00\",\"EndTime\":\"17-08-2018 18:00:00\",\"Background\":\"#5944dd\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Consulting\",\"StartTime\": \"03-08-2018 9:00:00\",\"EndTime\":\"03-08-2018 11:00:00\",\"Background\":\"#ed0497\", \"IsAllDay\":\"True\"}," +
"{\"Subject\": \"Yoga Therapy\",\"StartTime\": \"27-08-2018 10:00:00\",\"EndTime\":\"27-08-2018 11:00:00\",\"Background\":\"#ff0000\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Project Plan\",\"StartTime\": \"30-08-2018 15:00:00\",\"EndTime\":\"30-08-2018 16:00:00\",\"Background\":\"#ed0497\", \"IsAllDay\":\"False\"} ]";
- Deserialize the JSON data as list of JSON data model.
C#
List<JSONData> jsonDataCollection = JsonConvert.DeserializeObject<List<JSONData>>(jsonData);
- Create another class other than JSON data modal class for appointment mapping, since JSON data modal class does not support certain data types.
C#
/// <summary>
/// Represents custom data properties.
/// </summary>
public class Meeting
{
public string EventName { get; set; }
public DateTime From { get; set; }
public DateTime To { get; set; }
public bool AllDay { get; set; }
public Color Color { get; set; }
}
Refer to the following UG link for more details about creating custom appointment mapping:
https://help.syncfusion.com/xamarin/sfschedule/getting-started#adding-custom-appointments
- Add the JSON data list into the appointment collection (Meetings).
C#
// Creates Meetings and stores in a collection
public ObservableCollection<Meeting> Meetings { get; set; }
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 = Color.FromHex(data.Background),
AllDay = Convert.ToBoolean(data.IsAllDay)
});
}
- Bind it to a schedule using the SfSchedule.DataSource property.
XAML
<schedule:SfSchedule x:Name="schedule"
DataSource = "{Binding Meetings}"
ScheduleView = "WeekView" >
<schedule:SfSchedule.AppointmentMapping>
<schedule:ScheduleAppointmentMapping
ColorMapping="Color"
EndTimeMapping="To"
StartTimeMapping="From"
SubjectMapping="EventName"
IsAllDayMapping="AllDay"/>
</schedule:SfSchedule.AppointmentMapping>
<schedule:SfSchedule.BindingContext>
<local:ViewModel/>
</schedule:SfSchedule.BindingContext>
</schedule:SfSchedule>
Sample:
https://github.com/SyncfusionExamples/How-to-bind-JSON-data-to-schedule-in-xamarin-forms
