Week numbers of the WinUI Calendar Date Picker (SfCalendarDatePicker)

22 Jul 202610 minutes to read

This section describes about the week numbers in the Calendar Date Picker control.

Enable week numbers

You can show week numbers for each week in the drop-down calendar of the Calendar Date Picker control by setting the value of the ShowWeekNumbers property as true. By default, the value of the ShowWeekNumbers property is false.

NOTE

You can change the value of the WeekNumberRule property using the CalendarWeekRule, and you can also add any prefix or suffix characters to # for the WeekNumberFormat property.

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   ShowWeekNumbers="True" />
</Window>
using Syncfusion.UI.Xaml.Calendar;

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.ShowWeekNumbers = true;

show-week-number-in-winui-calendar-date-picker

Week rule

You can change the rule for determining the first week of the year in the drop-down calendar of the Calendar Date Picker control using the WeekNumberRule property. The default value of the WeekNumberRule property is FirstDay. You can apply any one of the following rules to the WeekNumberRule property:

  • FirstDay - Indicates that the first week of the year begins on the first day of the year and ends before the following designated first day of the week.

  • FirstFourDayWeek - Indicates that the first week of the year is the first week with four or more days before the designated first day of the week.

  • FirstFullWeek - Indicates that the first week of the year begins on the first occurrence of the designated first day of the week on or after the first day of the year.

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   ShowWeekNumbers="True"
                                   WeekNumberRule="FirstFullWeek" />
</Window>
using Syncfusion.UI.Xaml.Calendar;

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.ShowWeekNumbers = true;
sfCalendarDatePicker.WeekNumberRule = CalendarWeekRule.FirstFullWeek;

show-week-number-with-rrule-in-winui-calendar-date-picker

Format week numbers

You can customize the format in which week numbers are displayed in the drop-down calendar of the Calendar Date Picker control using the WeekNumberFormat property. The default value of the WeekNumberFormat property is #.

NOTE

You can add any prefix or suffix characters to # in the WeekNumberFormat property by using different custom formats.

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   ShowWeekNumbers="True"
                                   WeekNumberRule="FirstFullWeek"
                                   WeekNumberFormat = "W #" />
</Window>
using Syncfusion.UI.Xaml.Calendar;

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.ShowWeekNumbers = true;
sfCalendarDatePicker.WeekNumberRule = CalendarWeekRule.FirstFullWeek;
sfCalendarDatePicker.WeekNumberFormat = "W #";

show-week-number-with-format-in-winui-calendar-date-picker

Customize the week number and name of days of the week appearance

The Calendar Date Picker control allows you to customize the template of the week numbers using the WeekNumberTemplate property and the template of the name of days of the week using the WeekNameTemplate property in the CalendarItemTemplateSelector class.

In the following code, a DataTemplate is created for both WeekNumberTemplate and WeekNameTemplate properties in the CalendarItemTemplateSelector class.

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <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:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                                       HorizontalAlignment="Center" VerticalAlignment="Center" ShowWeekNumbers="True"
                                       >
            <FlyoutBase.AttachedFlyout>
                <editors:DropDownFlyout>
                    <calendar:SfCalendar WeekNumberRule="FirstFourDayWeek"
                        ShowWeekNumbers="True">
                        <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:SfCalendarDatePicker>
    </Grid>
</Window>