Week number of the WinUI Calendar (SfCalendar)

22 Jul 20268 minutes to read

This section describes 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 the Calendar control by setting the value of the ShowWeekNumbers property to true. By default, the value of the ShowWeekNumbers 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 # in the WeekNumberFormat property.

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

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 the Calendar 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:SfCalendar HorizontalAlignment="Center" 
                         VerticalAlignment="Center"
                         ShowWeekNumbers="True" 
                         WeekNumberRule="FirstFullWeek"
                         />
</Window>
using Syncfusion.UI.Xaml.Calendar;

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

NOTE

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

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

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

The 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 code, a DataTemplate is created for both the 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="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>
</Window>