Category / Section
How to bind appointments in Xamarin.Forms Schedule (SfSchedule)?
2 mins read
The SfSchedule allows you to bind schedule appointments to the reactive UI ViewModel which is a composable and cross-platform model-view-viewmodel framework for all .NET platforms.
To achieve this, follow the below steps:
Step 1: Install the ReactiveUI and ReactiveUI.XamForms in your project.
Step 2: Create ViewModel which should implement ReactiveObject.
public class ViewModel : ReactiveObject
{
/// <summary>
/// collecions for meetings.
/// </summary>
private ObservableCollection<Meeting> meetings;
/// <summary>
/// color collection.
/// </summary>
private List<Color> colorCollection;
/// <summary>
/// current day meeting.
/// </summary>
private List<string> currentDayMeetings;
public ViewModel()
{
this.Meetings = new ObservableCollection<Meeting>();
this.AddAppointmentDetails();
this.AddAppointments();
}
/// <summary>
/// Gets or sets meetings.
/// </summary>
public ObservableCollection<Meeting> Meetings
{
get
{
return this.meetings;
}
set
{
this.RaiseAndSetIfChanged(ref meetings,value);
}
}
/// <summary>
/// adding appointment details.
/// </summary>
private void AddAppointmentDetails()
{
this.currentDayMeetings = new List<string>();
this.currentDayMeetings.Add("General Meeting");
this.currentDayMeetings.Add("Plan Execution");
this.currentDayMeetings.Add("Project Plan");
this.currentDayMeetings.Add("Consulting");
this.currentDayMeetings.Add("Support");
this.currentDayMeetings.Add("Development Meeting");
this.currentDayMeetings.Add("Scrum");
this.currentDayMeetings.Add("Project Completion");
this.currentDayMeetings.Add("Release updates");
this.currentDayMeetings.Add("Performance Check");
this.colorCollection = new List<Color>();
this.colorCollection.Add(Color.FromHex("#FFA2C139"));
this.colorCollection.Add(Color.FromHex("#FFD80073"));
this.colorCollection.Add(Color.FromHex("#FF1BA1E2"));
this.colorCollection.Add(Color.FromHex("#FFE671B8"));
this.colorCollection.Add(Color.FromHex("#FFF09609"));
this.colorCollection.Add(Color.FromHex("#FF339933"));
this.colorCollection.Add(Color.FromHex("#FF00ABA9"));
this.colorCollection.Add(Color.FromHex("#FFE671B8"));
this.colorCollection.Add(Color.FromHex("#FF1BA1E2"));
this.colorCollection.Add(Color.FromHex("#FFD80073"));
this.colorCollection.Add(Color.FromHex("#FFA2C139"));
this.colorCollection.Add(Color.FromHex("#FFA2C139"));
this.colorCollection.Add(Color.FromHex("#FFD80073"));
this.colorCollection.Add(Color.FromHex("#FF339933"));
this.colorCollection.Add(Color.FromHex("#FFE671B8"));
this.colorCollection.Add(Color.FromHex("#FF00ABA9"));
}
/// <summary>
/// Adds the appointments.
/// </summary>
private void AddAppointments()
{
var today = DateTime.Now.Date;
var random = new Random();
for (int month = -1; month < 2; month++)
{
for (int day = -5; day < 5; day++)
{
for (int count = 0; count < 2; count++)
{
var meeting = new Meeting();
meeting.From = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));
meeting.To = meeting.From.AddHours(1);
meeting.EventName = this.currentDayMeetings[random.Next(7)];
meeting.Color = this.colorCollection[random.Next(14)];
this.Meetings.Add(meeting);
}
}
}
}
}
Step 3: ContentPage should inherit from ReactiveContentPage<TViewModel> and we are going to use ReactiveUI Binding to bind our ViewModel to our View.
XMAL
public partial class MainPage : ReactiveContentPage<ViewModel>
{
public MainPage(ViewModel viewModel)
{
}
}
C#
<?xml version="1.0" encoding="utf-8" ?>
<rxui:ReactiveContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ScheduleXamarin"
xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
xmlns:schedule="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"
x:Class="ScheduleXamarin.MainPage"
x:TypeArguments="local:ViewModel">
<ContentPage.Content>
<schedule:SfSchedule x:Name="Schedule"
DataSource="{Binding Meetings}"
ScheduleView="MonthView"
ShowAppointmentsInline="True"
Margin="0">
<schedule:SfSchedule.AppointmentMapping>
<schedule:ScheduleAppointmentMapping
ColorMapping="Color"
EndTimeMapping="To"
StartTimeMapping="From"
SubjectMapping="EventName"
/>
</schedule:SfSchedule.AppointmentMapping>
</schedule:SfSchedule>
</ContentPage.Content>
</rxui:ReactiveContentPage>
Step 4: View can be connected in one-way dependent manner to the ViewModel through bindings. You can set the BindingContext for the SfSchedule in MainPage.cs itself in code behind like below.
public partial class MainPage : ReactiveContentPage<ViewModel>
{
public MainPage(ViewModel viewModel)
{
ViewModel = viewModel;
InitializeComponent();
}
}
