Week numbers of the WinUI Calendar Date Picker (SfCalendarDatePicker)

25 May 20229 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 ShowWeekNumbers property as true. By default, the value of ShowWeekNumber property is false.

NOTE

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

<calendar:SfCalendarDatePicker HorizontalAlignment="Center" 
                               VerticalAlignment="Center"
                               ShowWeekNumbers="True" />

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.

<calendar:SfCalendarDatePicker HorizontalAlignment="Center" 
                               VerticalAlignment="Center"
                               ShowWeekNumbers="True" 
                               WeekNumberRule="FirstFullWeek" />

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 WeekNumberFormat property is #.

NOTE

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

<calendar:SfCalendarDatePicker HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               ShowWeekNumbers="True" 
                               WeekNumberRule="FirstFullWeek"
                               WeekNumberFormat = "W #" />

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 name of days of the week using WeekNameTemplate property in the CalendarItemTemplateSelector class.

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

<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>