Category / Section
How to show appointments in month cell using custom view in Xamarin.Forms schedule?
3 mins read
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
