Category / Section
How to bind appointments in Xamarin.Forms Calendar (SfCalendar) using Reactive MVVM
2 mins read
The SfCalendar 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
{
private CalendarEventCollection appointments;
private ObservableCollection<Color> colorCollection;
private ObservableCollection<string> meetingSubjectCollection;
public CalendarEventCollection Appointments
{
get
{
return this.appointments;
}
set
{
this.appointments = value;
this.RaiseAndSetIfChanged(ref appointments, value);
}
}
public ViewModel()
{
this.Appointments = new CalendarEventCollection();
this.AddAppointmentDetails();
this.AddAppointments();
}
private void AddAppointmentDetails()
{
meetingSubjectCollection = new ObservableCollection<string>();
meetingSubjectCollection.Add("BigDoor Board Meeting Paris, France");
meetingSubjectCollection.Add("Development Meeting New York, U.S.A");
meetingSubjectCollection.Add("Project Plan Meeting Kuala Lumpur, Malaysia");
meetingSubjectCollection.Add("Support - Web Meeting Dubai, UAE");
meetingSubjectCollection.Add("Project Release Meeting Istanbul, Turkey");
meetingSubjectCollection.Add("Customer Meeting Tokyo, Japan");
meetingSubjectCollection.Add("Consulting with doctor Amsterdam, Netherlands");
colorCollection = new ObservableCollection<Color>();
colorCollection.Add(Color.FromHex("#FFA2C139"));
colorCollection.Add(Color.FromHex("#FFD80073"));
colorCollection.Add(Color.FromHex("#FF1BA1E2"));
colorCollection.Add(Color.FromHex("#FFE671B8"));
colorCollection.Add(Color.FromHex("#FFF09609"));
colorCollection.Add(Color.FromHex("#FF339933"));
colorCollection.Add(Color.FromHex("#FF00ABA9"));
colorCollection.Add(Color.FromHex("#FFE671B8"));
colorCollection.Add(Color.FromHex("#FF1BA1E2"));
colorCollection.Add(Color.FromHex("#FFD80073"));
colorCollection.Add(Color.FromHex("#FFA2C139"));
colorCollection.Add(Color.FromHex("#FFA2C139"));
colorCollection.Add(Color.FromHex("#FFD80073"));
colorCollection.Add(Color.FromHex("#FF339933"));
colorCollection.Add(Color.FromHex("#FFE671B8"));
colorCollection.Add(Color.FromHex("#FF00ABA9"));
}
private void AddAppointments()
{
var today = DateTime.Now.Date;
var random = new Random();
for (int month = -1; month < 5; month++)
{
for (int day = -15; day < 15; day++)
{
for (int count = 0; count < 2; count++)
{
var appointment = new CalendarInlineEvent();
appointment.Subject = meetingSubjectCollection[random.Next(meetingSubjectCollection.Count)];
appointment.Color = colorCollection[random.Next(10)];
appointment.StartTime = today.AddMonths(month).AddDays(random.Next(0, 28)).AddHours(random.Next(9, 18));
appointment.EndTime = appointment.StartTime.AddHours(2);
this.Appointments.Add(appointment);
}
}
}
}
}
Step 3: ContentPage should inherit from ReactiveContentPage<TViewModel> and you 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#
<rxui:ReactiveContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:rxui="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"
xmlns:calendar="clr-namespace:Syncfusion.SfCalendar.XForms;assembly=Syncfusion.SfCalendar.XForms"
xmlns:local="clr-namespace:CalendarXamarin"
x:Class="CalendarXamarin.MainPage"
x:TypeArguments="local:ViewModel" >
<Grid Padding="0,20,0,0" BackgroundColor="White">
<calendar:SfCalendar x:Name="calendar1"
ShowInlineEvents="True"
InlineViewMode="Agenda"
DataSource="{Binding Appointments}"
>
</calendar:SfCalendar>
</Grid>
</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 SfCalendar in MainPage.cs itself in code behind like below.
public partial class MainPage : ReactiveContentPage<ViewModel>
{
public MainPage(ViewModel viewModel)
{
ViewModel = viewModel;
InitializeComponent();
}
}
