We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show appointments in month cell using custom view in Xamarin.Forms schedule?

Platform: Xamarin.Forms |
Control: SfSchedule |
Published Date: April 3, 2019 |
Last Revised Date: April 3, 2019

SfSchedule allows you customize the default appearance of month cell using custom view added to it. 

 

This article explains you how to display the custom appointment details in month cell by using custom view.

 

Step 1: Create a custom appointment details for scheduling an appointment.

 

public class Meeting
{
    public string Event { get; set; }
 
    public DateTime From { get; set; }
 
    public DateTime To { get; set; }
 
    public Color Color { get; set; }
 
    public bool AllDay { get; set; }
} 

 

Step 2: Create a custom appointment collection for displaying the schedule appointments in SfSchedule, and bind it to DataSource of SfSchedule.

 

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Meeting> scheduleAppointments;
    ObservableCollection<string> subjectCollection;
    ObservableCollection<Color> colorCollection;
    public ViewModel()
    {
        scheduleAppointments = new ObservableCollection<Meeting>();
        this.AddAppointmentDetails();
        this.AddAppointments();
    }
 
    public ObservableCollection<Meeting> ScheduleAppointments
    {
        get
        {
            return scheduleAppointments;
        }
        set
        {
            scheduleAppointments = value;
        }
    }
 
    private void AddAppointmentDetails()
    {
        subjectCollection = new ObservableCollection<string>();
        subjectCollection.Add("General Meeting");
        subjectCollection.Add("Plan Execution");
        subjectCollection.Add("Project Plan");
        subjectCollection.Add("Consulting");
        subjectCollection.Add("Performance Check");
        subjectCollection.Add("Yoga Therapy");
        subjectCollection.Add("Plan Execution");
        subjectCollection.Add("Project Plan");
        subjectCollection.Add("Consulting");
        subjectCollection.Add("Performance Check");
 
        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 = -5; i <= 5; i++)
            {
                for (int j = 0; j < 3; j++)
                {
                    var appointment = new Meeting();
                    appointment.Event = subjectCollection[random.Next(8)];
                    appointment.From = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));
                    appointment.To = appointment.From.AddHours(2);
                    appointment.Color = colorCollection[random.Next(11)];
                    appointment.AllDay = false;
                    this.ScheduleAppointments.Add(appointment);
                }
            }
        }
 
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
 
    public void OnPropertyChanged(string name)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }
}

 

Step 3: Map the custom appointments to StartTimeMapping, EndTimeMapping, ColorMapping, SubjectMapping, and IsAllDayMapping of AppointmentMapping to display the custom appointments in schedule.

 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CustomMonthCellView"
             xmlns:schedule="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"
             x:Class="CustomMonthCellView.ScheduleView">
    <ContentPage.Content>
        <schedule:SfSchedule ScheduleView="MonthView" DataSource="{Binding ScheduleAppointments}">
            <schedule:SfSchedule.AppointmentMapping>
                <schedule:ScheduleAppointmentMapping 
                    StartTimeMapping="From"
                    EndTimeMapping="To"
                    ColorMapping="Color"
                    SubjectMapping="Event"
                    IsAllDayMapping="AllDay">
                </schedule:ScheduleAppointmentMapping>
            </schedule:SfSchedule.AppointmentMapping>
            <schedule:SfSchedule.Behaviors>
                <local:ScheduleBehavior/>
            </schedule:SfSchedule.Behaviors>
            <schedule:SfSchedule.BindingContext>
                <local:ViewModel/>
            </schedule:SfSchedule.BindingContext>
        </schedule:SfSchedule>
    </ContentPage.Content>
</ContentPage>

 

Step 4: Customize the month cell using the OnMonthCellLoadedEvent event in SfSchedule by using View property of MonthCellLoadedEventArgs argument. Here, label is used to display month cell date of schedule and ListView is used to show the details of appointments. Bind the Appointments collection to ItemSource of ListView.

 

   void SfSchedule_OnMonthCellLoadedEvent(object sender, MonthCellLoadedEventArgs e)
        {
            Grid mainLayout = new Grid();
            mainLayout.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            mainLayout.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
 
            Label dateLabel = new Label();
            dateLabel.Text = e.date.ToString("dd");
            dateLabel.HorizontalTextAlignment = TextAlignment.Center;
            dateLabel.VerticalOptions = LayoutOptions.FillAndExpand;
            dateLabel.HorizontalOptions = LayoutOptions.FillAndExpand;
            dateLabel.BackgroundColor = Color.Transparent;
            mainLayout.Children.Add(dateLabel);
 
            ListView listView = new ListView();
            listView.HasUnevenRows = false;
            listView.BackgroundColor = Color.Transparent;
            listView.RowHeight = 20;
 
            var appointmentTemplate = new DataTemplate(() =>
            {
                var grid = new Grid();
                var appointmentName = new Label { Margin = new Thickness(0, 3, 3, 0), FontSize = 14};
                var collection = (e.appointments as ObservableCollection<object>);
                appointmentName.SetBinding(Label.TextProperty, "Event");
                appointmentName.SetBinding(Label.BackgroundColorProperty, "Color");
                grid.Children.Add(appointmentName);
                return new ViewCell { View = grid };
            });
 
            listView.ItemTemplate = appointmentTemplate;
            listView.ItemsSource = e.appointments;
            if((e.appointments as ObservableCollection<object>).Count !=0)
            mainLayout.Children.Add(listView,0,1);
            // Setting custom view for month cell
            e.view = mainLayout;
        }

 

Sample Demo: CustomMonthCellView

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile