Category / Section
How to bind JSON online data to Xamarin.Forms Schedule (SfSchedule)
1 min read
You can bind data from JSON to the Xamarin forms SfSchedule appointments.
STEP 1: Create a JSON data model
public class JSONData
{
public string Subject { get; set; }
public string StartTime { get; set; }
public string EndTime { get; set; }
}
STEP 2: Get the online JSON data with the help of GetStringAsync method and Deserialize the JSON data as list of JSON data mode and then Add the JSON data list into the appointment collection (Meetings).
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 = Color.Red
});
}
}
STEP 3: Bind appointments that collected through JSON online it to a schedule using the SfSchedule.DataSource property.
<schedule:SfSchedule x:Name="Schedule"
DataSource="{Binding Meetings}"
ScheduleView="MonthView" MoveToDate="{Binding dateTime}" ShowAppointmentsInline="True"
>
<schedule:SfSchedule.AppointmentMapping>
<schedule:ScheduleAppointmentMapping
EndTimeMapping="To"
StartTimeMapping="From"
SubjectMapping="EventName"
ColorMapping="Color"
/>
</schedule:SfSchedule.AppointmentMapping>
<schedule:SfSchedule.BindingContext>
<local:SchedulerViewModel/>
</schedule:SfSchedule.BindingContext>
</schedule:SfSchedule>
Output
