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
Did not find the solution
Contact Support