Week number of the WinUI Calendar (SfCalendar)

25 May 20227 minutes to read

This section describes about the week numbers and the customization options available in the Calendar control.

Enable week numbers

You can show the week numbers for each week in Calendar control by setting the value of the ShowWeekNumbers property as true. By default, the value of the 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:SfCalendar HorizontalAlignment="Center" 
                     VerticalAlignment="Center"
                     ShowWeekNumbers="True"
                     />
SfCalendar sfCalendar = new SfCalendar();
sfCalendar.ShowWeekNumbers = true;

show-week-numbers-in-winui-calendar

Week rule

You can change the rule for determining the first week of the year in Calendar control using the WeekNumberRule property. The default value of the WeekNumberRule property is FirstDay. You can also apply any one of the following rules to 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:SfCalendar HorizontalAlignment="Center" 
                     VerticalAlignment="Center"
                     ShowWeekNumbers="True" 
                     WeekNumberRule="FirstFullWeek"
                     />
SfCalendar sfCalendar = new SfCalendar();
sfCalendar.ShowWeekNumbers = true;
sfCalendar.WeekNumberRule = CalendarWeekRule.FirstFullWeek;

show-week-numbers-with-rule-in-winui-calendar

Format week numbers

You can customize the format, in which week numbers are displayed in the Calendar 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 to apply different custom formats.

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

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.ShowWeekNumbers = true;
sfCalendar.WeekNumberRule = CalendarWeekRule.FirstFullWeek;
sfCalendar.WeekNumberFormat = "W #";

customize-week-numbers-format-in-winui-calendar

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

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

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

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="WeekNameAndNumberTemplate">
            <Viewbox >
                <Grid>
                    <Ellipse Width="30" 
                                Height="30" 
                                Fill="WhiteSmoke"
                                HorizontalAlignment="Center" VerticalAlignment="Center"
                                Margin="1" />
                    <TextBlock Text="{Binding DisplayText}" 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" 
                                Foreground="DeepSkyBlue"/>
                </Grid>
            </Viewbox>
        </DataTemplate>
    </Grid.Resources>
    <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>
</Grid>