Category / Section
How to customize the month inline appointments view in Xamarin.Forms scheduler?
2 mins read
SfSchedule allows you customize the inline appointment view. This article explains you how to customize the inline appointments view in schedule.
Step 1: Set the ShowAppointmentsInline property to true to display the month view appointments in inline view.
<schedule:SfSchedule x:Name="schedule" ScheduleView="MonthView" ShowAppointmentsInline="true"/>
Step 2: Create the event collection of schedule and bind it to DataSource of SfSchedule.
public class ViewModel : INotifyPropertyChanged { private ScheduleAppointmentCollection scheduleAppointments; ObservableCollection<string> subjectCollection; ObservableCollection<Color> colorCollection; public ViewModel() { scheduleAppointments = new ScheduleAppointmentCollection(); this.AddAppointmentDetails(); this.AddAppointments(); } public ScheduleAppointmentCollection ScheduleAppointments { get { return scheduleAppointments; } set { scheduleAppointments = value; } } private void AddAppointmentDetails() { subjectCollection = new ObservableCollection<string>(); subjectCollection.Add("Conference"); subjectCollection.Add("Checkup"); subjectCollection.Add("Dale's Birthday"); subjectCollection.Add("System Chekup"); colorCollection = new ObservableCollection<Color>(); 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 <= 1; month++) { for (int i = -3; i <= 3; i++) { for (int j = 0; j < 2; j++) { var appointment = new ScheduleAppointment(); appointment.Subject = subjectCollection[random.Next(3)]; appointment.StartTime = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18)); appointment.EndTime = appointment.StartTime.AddHours(2); appointment.Color = colorCollection[random.Next(11)]; appointment.IsAllDay = false; this.ScheduleAppointments.Add(appointment); } } } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string name) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(name)); } } }
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CustomInlineAppointmentView.ScheduleView" xmlns:local="clr-namespace:CustomInlineAppointmentView" xmlns:schedule="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"> <ContentPage.Content> <schedule:SfSchedule x:Name="schedule" ScheduleView="MonthView" ShowAppointmentsInline="true" DataSource="{Binding ScheduleAppointments}"> <schedule:SfSchedule.Behaviors> <local:ScheduleBehavior/> </schedule:SfSchedule.Behaviors> <schedule:SfSchedule.BindingContext> <local:ViewModel/> </schedule:SfSchedule.BindingContext> </schedule:SfSchedule> </ContentPage.Content> </ContentPage>
Step 3: Customize the month inline appointment view using the OnMonthInlineAppointmentLoaded event in SfSchedule using View of MonthInlineLoadedEventArgs argument.
void SfSchedule_OnMonthInlineAppointmentLoadedEvent(object sender, MonthInlineAppointmentLoadedEventArgs e) { var button = new Button() { BackgroundColor = Color.Blue }; if ((e.appointment as ScheduleAppointment).Subject == "Dale's Birthday") { button.Image = "cake_schedule"; } else if ((e.appointment as ScheduleAppointment).Subject == "Conference") { button.Image = "conference_schedule"; } else if ((e.appointment as ScheduleAppointment).Subject == "Checkup") { button.Image = "stethoscope_schedule"; } if ((e.appointment as ScheduleAppointment).Subject == "System Chekup") { button.Image = "troubleshoot_schedule"; } button.Text = (e.appointment as ScheduleAppointment).Subject; button.TextColor = Color.White; button.BackgroundColor = (e.appointment as ScheduleAppointment).Color; e.view = button; }
Note:
In Xamarin.Forms UWP, there is no support for inline appointment view customization using custom view.
Sample Demo: CustomInlineAppointmentView