How to customize the month cell in the WinUI Scheduler (Calendar)?
Customize the schedule month cell with appointment count by using the MonthCellTemplateSelector property of the MonthViewSettings in the WinUI Scheduler.
XAML
Two different month cell DataTemplates are defined for the month cell to display the month view details.
<DataTemplate x:Key="monthCellTemplate">
<TextBlock Text="{Binding DateText}"
Foreground="{Binding Foreground}"
HorizontalAlignment="Center"/>
</DataTemplate>
<DataTemplate x:Key="monthAppointmentTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding DateText}"
Foreground="{Binding Foreground}"
HorizontalAlignment="Center"
Grid.Row="0"/>
<TextBlock Text="{Binding Path=Appointments.Count}"
Foreground="Red"
HorizontalAlignment="Center"
Grid.Row="1"/>
</Grid>
</DataTemplate>
C#
Create the MonthCellTemplateSelector with the help of the DataTemplateSelector. Using the SelectTemplateCore override method, return the required month cell data template in the view.
public class MonthCellTemplateSelector : DataTemplateSelector
{
/// <summary>
/// Initializes a new instance of the <see cref="MonthCellTemplateSelector" /> class.
/// </summary>
public MonthCellTemplateSelector()
{
this.MonthAppointmentTemplate = App.Current.Resources["monthAppointmentTemplate"] as DataTemplate;
this.MonthCellDatesTemplate = App.Current.Resources["monthCellTemplate"] as DataTemplate;
}
/// <summary>
/// Gets or sets Month Appointment Template.
/// </summary>
public DataTemplate MonthAppointmentTemplate { get; set; }
/// <summary>
/// Gets or sets Month Cell Dates Template.
/// </summary>
public DataTemplate MonthCellDatesTemplate { get; set; }
/// <summary>
/// Template selection method
/// </summary>
/// <param name="item">return the object</param>
/// <param name="container">return the bindable object</param>
/// <returns>return the template</returns>
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var appointments = item as List<ScheduleAppointment>;
if (appointments == null || appointments.Count == 0)
{
return MonthCellDatesTemplate;
}
else
{
return MonthAppointmentTemplate;
}
}
}
XAML
Add the scheduler appointments by using the data binding concept, and bind the DataTemplateSelector declared for the MonthCellTemplateSelector property.
<Grid>
<Grid.Resources>
<local:MonthCellTemplateSelector x:Key="monthCellTemplateSelector"/>
</Grid.Resources>
<syncfusion:SfScheduler x:Name="Schedule"
ViewType="Month"
ItemsSource="{Binding Appointments}">
<syncfusion:SfScheduler.MonthViewSettings>
<syncfusion:MonthViewSettings AppointmentDisplayMode="None"
MonthCellTemplateSelector="{StaticResource monthCellTemplateSelector}">
</syncfusion:MonthViewSettings>
</syncfusion:SfScheduler.MonthViewSettings>
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:AppointmentMapping StartTime="From"
EndTime="To"
Subject="EventName"
AppointmentBackground="Background"
IsAllDay="IsAllDay"/>
</syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>
</Grid>
Take a moment to pursue the documentation. You can also find the options like customizing the MonthCell.
Conclusion
I hope you enjoyed learning about how to customize the month cell with appointment count in the WinUI Scheduler (Calendar).
You can refer to
our WinUI
Scheduler feature
tour page to know about its other
groundbreaking feature representations and documentation, and
how to quickly get started for configuration specifications. You can also
explore our
WinUI Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
