How to customize the .NET MAUI Scheduler (SfScheduler) header appearance using DataTemplateSelector?
The .NET MAUI Scheduler allows you to customize the default appearance of its header using the HeaderTemplate property. You can select different DataTemplates for the header by implementing a DataTemplateSelector.
The BindingContext of the HeaderTemplate is the SchedulerHeaderDetails.
CS
Define a HeaderTemplateSelector class to facilitate different DataTemplates based on whether the date range includes today.
public class HeaderTemplateSelector : DataTemplateSelector
{
public HeaderTemplateSelector()
{
}
public DataTemplate TodayDatesTemplate { get; set; }
public DataTemplate NormaldatesTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var headerDetails = item as SchedulerHeaderDetails;
if (headerDetails != null)
{
if (headerDetails.StartDate.Date <= DateTime.Now.Date && headerDetails.EndDate >= DateTime.Now.Date)
return TodayDatesTemplate;
}
return NormaldatesTemplate;
}
}
XAML
Assign that DataTemplateSelector to the HeaderTemplate property to select the DataTemplate based on the today and normal dates.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="todayDatesTemplate">
<Grid Background = "LightPink" >
<Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center">
<Label.Text>
<MultiBinding StringFormat = "{}{0:MMM dd, yyyy} - {1:MMM dd, yyyy}" >
<Binding Path="StartDate" />
<Binding Path = "EndDate" />
</MultiBinding >
</Label.Text >
</Label >
<Label HorizontalOptions="Center" VerticalOptions="End" Text="{Binding Text}" TextColor="Red" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="normaldatesTemplate">
<Grid Background = "LightGreen" >
<Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center">
<Label.Text>
<MultiBinding StringFormat = "{}{0:MMM dd, yyyy} - {1:MMM dd, yyyy}" >
<Binding Path="StartDate" />
<Binding Path = "EndDate" />
</MultiBinding >
</Label.Text >
</Label>
<Label HorizontalOptions="Center" VerticalOptions="End" Text="{Binding Text}" TextColor="Orange" />
</Grid>
</DataTemplate>
<local:HeaderTemplateSelector x:Key="headerTemplateSelector" TodayDatesTemplate="{StaticResource todayDatesTemplate}" NormaldatesTemplate="{StaticResource normaldatesTemplate}" />
</Grid.Resources>
<scheduler:SfScheduler x:Name="Scheduler"
View="Week">
<scheduler:SfScheduler.HeaderView>
<scheduler:SchedulerHeaderView HeaderTemplate = "{StaticResource headerTemplateSelector}" />
</scheduler:SfScheduler.HeaderView>
</scheduler:SfScheduler>
</Grid>
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the .NET MAUI Scheduler (SfScheduler) header appearance using DataTemplateSelector.
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!
