Category / Section
How to bind JSON data to Xamarin.Forms Calendar (SfCalendar) ?
2 mins read
You can bind the SfCalendar appointments from JSON by following the steps:
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; }
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.
C#
Create data for the data model.
//// Add data for JSON data model
private string JsonData =
"[{\"Subject\": \"General Meeting\",\"StartTime\": \"30 August 2018 02:00:00 PM\",\"EndTime\":\"30 August 2018 03:00:00 PM\",\"Background\":\"#5944dd\", \"IsAllDay\":\"True\"}, " +
"{\"Subject\": \"Plan Execution\",\"StartTime\": \"22 August 2018 08:00:00 AM\",\"EndTime\":\"22 August 2018 10:00:00 AM\",\"Background\":\"#ff0000\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Performance Check\",\"StartTime\": \"17 August 2018 05:00:00 PM\",\"EndTime\":\"17 August 2018 06:00:00 PM\",\"Background\":\"#5944dd\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Consulting\",\"StartTime\": \"03 August 2018 09:00:00 AM\",\"EndTime\":\"03 August 2018 11:00:00 AM\",\"Background\":\"#ed0497\", \"IsAllDay\":\"True\"}," +
"{\"Subject\": \"Yoga Therapy\",\"StartTime\": \"27 August 2018 09:00:00 AM\",\"EndTime\":\"27 August 2018 11:00:00 AM\",\"Background\":\"#ff0000\", \"IsAllDay\":\"False\"}," +
"{\"Subject\": \"Project Plan\",\"StartTime\": \"30 August 2018 10:00:00 AM\",\"EndTime\":\"30 August 2018 11:00:00 AM\",\"Background\":\"#ed0497\", \"IsAllDay\":\"False\"} ]";
C#
Deserialize the JSON data as list of JSON data model.
List<JSONData> jsonDataCollection = JsonConvert.DeserializeObject<List<JSONData>>(JsonData);
C#
Load the JSON data list into the DataForm model.
foreach (var data in jsonDataCollection)
{
this.Appointments.Add(new CalendarInlineEvent()
{
Subject = data.Subject,
StartTime = Convert.ToDateTime(data.StartTime),
EndTime = Convert.ToDateTime(data.EndTime),
Color = Color.FromHex(data.Background),
IsAllDay = Convert.ToBoolean(data.IsAllDay)
});
}
XAML
Bind it to a calendar using the DataSource property.
<calendar:SfCalendar x:Name="calendar"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
DataSource="{Binding Appointments}"
ShowInlineEvents="True"
InlineViewMode="Agenda">
<calendar:SfCalendar.BindingContext>
<local:CalendarViewModel/>
</calendar:SfCalendar.BindingContext>
</calendar:SfCalendar>
Output
|
