How to customize the days view header appearance in .NET MAUI Scheduler?
The .NET MAUI MAUI Scheduler provides the flexibility to customize the days view header appearance across different views such as day, week, workweek, month, and timeline using the ViewHeaderTemplate property. This customization is applicable to DaysView, TimelineView, and MonthView. You can select different DataTemplates for the view header using DataTemplateSelector.
The BindingContext of the ViewHeaderTemplate is System.DateTime, allowing you to use properties from System.DateTime within your data templates.
CS
Define a ViewHeaderTemplateSelector class to manage DataTemplates and assign them to the ViewHeaderTemplate property of the days and timeline views.
public class ViewHeaderTemplateSelector : DataTemplateSelector
{
public ViewHeaderTemplateSelector()
{
}
public DataTemplate NormalDateTemplate { get; set; }
public DataTemplate TodayDateTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
var dateTime = (DateTime)item;
if (dateTime.Date == DateTime.Today.Date)
return TodayDateTemplate;
else
return NormalDateTemplate;
}
}
XAML
The ViewHeaderTemplateSelector chooses the DataTemplate based on whether the date is today or a normal date.
<Grid>
<Grid.Resources>
<DataTemplate x:Key="normalDateTemplate">
<StackLayout x:Name="stackLayout" Orientation="Vertical" Background="MediumPurple">
<Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:dd}'}" FontSize="Small" FontFamily="Bold" TextColor="White" />
<Label x:Name="label1" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" FontSize="Small" FontFamily="Bold" TextColor="White"/>
</StackLayout>
</DataTemplate>
<DataTemplate x:Key="todayDateTemplate">
<StackLayout x:Name="stackLayout" Orientation="Vertical" Background="MediumPurple">
<Label x:Name="label" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:dd}'}" FontSize="Small" FontFamily="Bold" TextColor="Yellow" />
<Label x:Name="label1" HorizontalOptions="Center" VerticalOptions="Center" Text="{Binding StringFormat='{0:ddd}'}" FontSize="Small" FontFamily="Bold" TextColor="Yellow"/>
</StackLayout>
</DataTemplate>
<local:ViewHeaderTemplateSelector x:Key="viewHeaderTemplateSelector" TodayDateTemplate="{StaticResource todayDateTemplate}" NormalDateTemplate="{StaticResource normalDateTemplate}"/>
</Grid.Resources>
<scheduler:SfScheduler x:Name="Scheduler"
View="Week" >
<scheduler:SfScheduler.DaysView>
<scheduler:SchedulerDaysView ViewHeaderTemplate="{StaticResource viewHeaderTemplateSelector}"/>
</scheduler:SfScheduler.DaysView>
<scheduler:SfScheduler.TimelineView>
<scheduler:SchedulerTimelineView ViewHeaderTemplate="{StaticResource viewHeaderTemplateSelector}"/>
</scheduler:SfScheduler.TimelineView>
</scheduler:SfScheduler>
</Grid>
Output
|
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to customize the days view header appearance in .NET MAUI Scheduler.
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.
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!
