Category / Section
How to bind appointments in Xamarin.Forms Schedule using MVVMCross
Schedule allows you to bind appointments using MVVMCross Framework. To achieve this follow below steps.
Step 1: Add MVVMCross.Forms.StarterPack package in your project.
Step 2: Add Schedule inside MVVM container using MVVM.Forms assembly.
Step 3: Create a view model inherits from CustomMvxViewModel and add data on this
C#
public class CustomMvxFormsViewModel : MvxViewModel
{
public ObservableCollection<Meeting> Meetings { get; set; }
//public ObservableCollection<Meeting> meetings { get; set; }
public MvxFormsViewModel()
{
Meetings = new ObservableCollection<Meeting>();
for (int i = 0; i < 15; i++)
{
Meetings.Add(new Meeting()
{
EventName = "Client Meeting",
From = new DateTime(2018, 5, 1, 9, 0, 0).AddDays(i),
To = new DateTime(2018, 5, 1, 11, 0, 0).AddDays(i),
Color = Color.Green
});
}
}
public override Task Initialize()
{
//TODO: Add starting logic here
return base.Initialize();
}
}
Step 4: Use MVVM.Bindings assembly to bind the data to schedule, and refer the view model class as assembly to bind the data from the view model
XAML
<?xml version="1.0" encoding="UTF-8"?> <d:MvxContentPage x:TypeArguments="viewModels:MvxFormsViewModel" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MvxForms.Core.Pages" x:Class="MvxForms.Core.Pages.MvxFormsPage" xmlns:viewModels="clr-namespace:MvxForms.Core.ViewModels;assembly=MvxForms.Core" xmlns:d="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms" xmlns:mvx="clr-namespace:MvvmCross.Forms.Bindings;assembly=MvvmCross.Forms" xmlns:syncfusion="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"> <ContentPage.Content> <syncfusion:SfSchedule x:Name="schedule" ScheduleView="MonthView" ShowAppointmentsInline="true" mvx:Bi.nd="DataSource Meetings" > <syncfusion:SfSchedule.AppointmentMapping> <syncfusion:ScheduleAppointmentMapping SubjectMapping="EventName" StartTimeMapping="From" EndTimeMapping="To" ColorMapping="Color"> </syncfusion:ScheduleAppointmentMapping> </syncfusion:SfSchedule.AppointmentMapping> </syncfusion:SfSchedule> </ContentPage.Content> </d:MvxContentPage>
Example: MVVMCross