How to customize the week number and day using DataTemplate in the WinUI Calendar Date Picker (SfCalendarDateRangePicker)
The ShowWeekNumbers property in the WinUI Calendar Date Picker (SfCalendarDatePicker) can be used to display the week number of the month. By default, ShowWeekNumbers is set to false. Also, you can customize the week number by using WeekNameTemplate and the weekday name by using the WeekNumberTemplate of the CalendarItemTemplateSelector.
XAML
<Window
x:Class="WeekNumberCustomization.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WeekNumberCustomization"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar" xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
<Grid>
<Grid.Resources>
<DataTemplate x:Key="WeekNameAndNumberTemplate">
<Viewbox >
<Grid>
<Ellipse Width="30"
Height="30"
Fill="White"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="1" />
<TextBlock Text="{Binding DisplayText}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="DeepSkyBlue"/>
</Grid>
</Viewbox>
</DataTemplate>
</Grid.Resources>
<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
HorizontalAlignment="Center" VerticalAlignment="Center" ShowWeekNumbers="True"
WeekNumberRule="FirstFullWeek"
>
<FlyoutBase.AttachedFlyout>
<editors:DropDownFlyout>
<calendar:SfCalendar ShowWeekNumbers="{x:Bind sfCalendarDateRangePicker.ShowWeekNumbers,Mode=TwoWay}" >
<calendar:SfCalendar.Resources>
<Style TargetType="calendar:CalendarItem">
<Setter Property="ContentTemplateSelector">
<Setter.Value>
<calendar:CalendarItemTemplateSelector WeekNameTemplate="{StaticResource WeekNameAndNumberTemplate}"
WeekNumberTemplate="{StaticResource WeekNameAndNumberTemplate}"
/>
</Setter.Value>
</Setter>
</Style>
</calendar:SfCalendar.Resources>
</calendar:SfCalendar>
</editors:DropDownFlyout>
</FlyoutBase.AttachedFlyout>
</calendar:SfCalendarDateRangePicker>
</Grid>
</Window>
|
