How to customize month cell appearance in .NET MAUI Scheduler?
The .NET MAUI Scheduler allows customization of month cell appearances with the CellTemplate property. You can apply different DataTemplate for month cells using a DataTemplateSelector.
The BindingContext of the CellTemplate is the SchedulerMonthCellDetails. You can use the SchedulerMonthCellDetails binding context class properties such as Appointments, DateTime, and IsLeadingOrTrailingDate to bind the details in the month cell data template.
CS
Create a MonthCellTemplateSelector class, add the DataTemplate APIs based on the requirement, and assign it to the CellTemplate property.
Here, two DataTemplate are declared based on the today and normal dates.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="normalDateTemplate">
<Border Background = "MediumPurple">
<Label HorizontalTextAlignment="Center" TextColor="Green" Text="{Binding DateTime.Day}"/>
</Border>
</DataTemplate>
<DataTemplate x:Key="todayDateTemplate">
<Border Background = "MediumPurple">
<Label HorizontalTextAlignment="Center" TextColor="Red" Text="{Binding DateTime.Day}"/>
</Border>
</DataTemplate>
<local:MonthCellTemplateSelector x:Key="monthCellTemplateSelector" TodayDateTemplate="{StaticResource todayDateTemplate}" NormalDateTemplate="{StaticResource normalDateTemplate}"/>
</Grid.Resources>
<scheduler:SfScheduler x:Name="Scheduler"
View="Month" >
<scheduler:SfScheduler.MonthView>
<scheduler:SchedulerMonthView CellTemplate="{StaticResource monthCellTemplateSelector}" />
</scheduler:SfScheduler.MonthView>
</scheduler:SfScheduler>
</Grid>
XAML
DataTemplateSelector selects the DataTemplate based on the today date and normal dates.
public class MonthCellTemplateSelector : DataTemplateSelector
{
public MonthCellTemplateSelector()
{
}
public DataTemplate NormalDateTemplate { get; set; }
public DataTemplate TodayDateTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var monthCellDetails = item as SchedulerMonthCellDetails;
if (monthCellDetails.DateTime.Date == DateTime.Today.Date)
return TodayDateTemplate;
else
return NormalDateTemplate;
}
}
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the month cell appearance using DataTemplateSelector in .NET MAUI Scheduler (SfScheduler).
Refer to our .NET MAUI Scheduler feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Scheduler documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Scheduler and other .NET MAUI components.
Please let us know in the following comments section if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
