Week numbers of the WinUI Calendar DateRange Picker

25 May 202210 minutes to read

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

Enable week numbers

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

NOTE

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

<calendar:SfCalendarDateRangePicker HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"
                                    ShowWeekNumbers="True"
                                    />
SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.ShowWeekNumbers = true;

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

Week rule

You can change the rule for determining the first week of the year in the dropdown calendar of the Calendar DateRange Picker control using the WeekNumberRule property. The default value of the WeekNumberRule property is FirstDay and you can also 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:SfCalendarDateRangePicker HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"
                                    ShowWeekNumbers="True" 
                                    WeekNumberRule="FirstFullWeek" />

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.ShowWeekNumbers = true;
sfCalendarDateRangePicker.WeekNumberRule = CalendarWeekRule.FirstFullWeek;

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

Format week numbers

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

NOTE

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

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

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.ShowWeekNumbers = true;
sfCalendarDateRangePicker.WeekNumberRule = CalendarWeekRule.FirstFullWeek;
sfCalendarDateRangePicker.WeekNumberFormat = "W #";

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

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

The Calendar DateRange 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 the WeekNameTemplate property in the CalendarItemTemplateSelector class.

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