Category / Section
How to show appointments in custom month cell using the month cell template in Xamarin.Forms schedule?
3 mins read
SfSchedule allows you customize the default appearance of month cell using MonthCellTemplate.
This article explains you how to display the custom appointment details in month cell using the cell template feature.
Step 1: Create a custom appointment details for scheduling the 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: Customize the appearance of month cell using the MonthCellTemplate property of MonthViewSettings and 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:CustomMonthCellTemplate"
xmlns:schedule="clr-namespace:Syncfusion.SfSchedule.XForms;assembly=Syncfusion.SfSchedule.XForms"
x:Class="CustomMonthCellTemplate.ScheduleView">
<ContentPage.Resources>
<ResourceDictionary>
<local:MonthCellTemplateSelector x:Key="TemplateSelector"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<schedule:SfSchedule x:Name="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.MonthViewSettings>
<schedule:MonthViewSettings MonthCellTemplate="{StaticResource TemplateSelector}" TodayBackground="Transparent"/>
</schedule:SfSchedule.MonthViewSettings>
<schedule:SfSchedule.BindingContext>
<local:ViewModel/>
</schedule:SfSchedule.BindingContext>
</schedule:SfSchedule>
</ContentPage.Content>
</ContentPage>
Step 4: Create a custom view for displaying the month cell date that does not have appointments on that date.
<?xml version="1.0" encoding="UTF-8"?>
<Label xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CustomMonthCellTemplate.MonthCellTemplate"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
BackgroundColor="Transparent"
Text="{Binding Date, StringFormat='{0:dd}'}">
</Label>
Step 5: Create a custom view for displaying the month cell date and appointments. 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.
<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CustomMonthCellTemplate.MonthCellAppointmentTemplate">
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Text="{Binding Date, StringFormat='{0:dd}'}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"/>
<ListView
ItemsSource="{Binding Appointments}"
HasUnevenRows="false"
RowHeight="20"
BackgroundColor="Transparent"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Label Text="{Binding Event}" Margin="0,3,3,0" FontSize="Small" BackgroundColor="{Binding Color}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Step 6: Create a DataTemplateSelector; it will help you select a custom template to be shown in the month cell of schedule.
public class MonthCellTemplateSelector : DataTemplateSelector
{
private DataTemplate MonthCellTemplate { get; set; }
private DataTemplate MonthCellAppointmentTemplate { get; set; }
public MonthCellTemplateSelector()
{
MonthCellTemplate = new DataTemplate(typeof(MonthCellTemplate));
MonthCellAppointmentTemplate = new DataTemplate(typeof(MonthCellAppointmentTemplate));
}
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var schedule = container as SfSchedule;
if (schedule != null)
{
var appointments = (IList)(item as MonthCellItem).Appointments;
if (appointments != null && appointments.Count > 0)
return MonthCellAppointmentTemplate;
else
return MonthCellTemplate;
}
return null;
}
}
Sample Demo: CustomMonthCellTemplate
