How to customize the agenda view month header appearance using the DataTemplateSelector in .NET MAUI Scheduler (SfScheduler)?
The .NET MAUI Scheduler's agenda view organizes events or appointments sequentially and presents distinct interfaces for mobile and desktop platforms. You can enhance this UI by employing a DataTemplateSelector to decide how the month header appears, based on specific criteria.
When the desktop view width is less than 600, the scheduler will display the mobile agenda UI on the desktop.
You can customize the default appearance of the month header of the agenda view by using the MonthHeaderTemplate property of the AgendaView.
The BindingContext for MonthHeaderTemplate is the month's date; you can use this date value to bind the details in the data template.
XAML
Initialize the scheduler agenda view by using the View property.
<xmlns:scheduler="clr-
namespace:Syncfusion.Maui.Scheduler;assembly=Syncfusion.Maui.Scheduler">
<scheduler:SfScheduler x:Name="Scheduler"
View="Agenda" >
<scheduler:SfScheduler.AgendaView>
<scheduler:SchedulerAgendaView MonthHeaderTemplate="{StaticResource agendaViewTemplateSelector}" />
</scheduler:SfScheduler.AgendaView>
</scheduler:SfScheduler>
CS
Implement a DataTemplateSelector to select between different templates based on date criteria.
public class AgendaViewTemplateSelector : DataTemplateSelector
{
public AgendaViewTemplateSelector()
{
}
public DataTemplate NormalDateTemplate { get; set; }
public DataTemplate TodayDateTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var dateTime = (DateTime)item;
if (dateTime.Month == DateTime.Today.Month)
return TodayDateTemplate;
else
return NormalDateTemplate;
}
}
XAML
MonthHeaderTemplate selects the DataTemplate based on the today and normal dates.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="todayDateTemplate">
<Grid>
<Label x:Name="label" HorizontalOptions="FillAndExpand" Background="LightPink" VerticalOptions="FillAndExpand" TextColor="Yellow" FontSize="25" Text="{Binding StringFormat='{0:MMMM yyyy}'}" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="normalDateTemplate">
<Grid>
<Label x:Name="label" HorizontalOptions="FillAndExpand" Background="MediumPurple" VerticalOptions="FillAndExpand" TextColor="Black" FontSize="25" Text="{Binding StringFormat='{0:MMMM yyyy}'}" />
</Grid>
</DataTemplate>
<local:AgendaViewTemplateSelector x:Key="agendaViewTemplateSelector" TodayDateTemplate="{StaticResource todayDateTemplate}" NormalDateTemplate="{StaticResource normalDateTemplate}"/>
</Grid.Resources>
</Grid>
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the agenda view month header appearance using the DataTemplateSelector in the .NET MAUI Scheduler (SfScheduler).
You can refer to our .NET MAUI Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. Explore our .NET MAUI Scheduler example to understand how to create and manipulate data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our 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!
