Articles in this section
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 you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied