DevExtreme Calendar for Angular, React, Vue and jQuery — Show Week Numbers (v22.2)

Our most recent release (v22.2) allows you to display week numbers within the DevExtreme Calendar component (Angular, React, Vue, jQuery). In this blog post, we'll take a closer look at this new feature/capability.

View Demo

Display Week Numbers (Column)

To display week numbers(column), simply enable the showWeekNumbers property:

React

<Calendar ...
    showWeekNumbers={true}
/>

Configure the Week Number Rule

You can use the weekNumberRule property to specify the rule used for week enumeration. The following values are available:

• firstDay
• firstFourDays
• fullWeek
• auto (default)

Angular

<dx-calendar ...
    [showWeekNumbers]="true"
    weekNumberRule="fullWeek"
>
</dx-calendar>

“First Day” Rule

The first week of the year is the week that contains January 1.

“First Four Days” Rule

The first week of a year is the week that starts on one of the following first four weekdays: Monday, Tuesday, Wednesday, or Thursday. This rule is defined within the ISO 8601 standard. If the first week of the year begins on a Friday, Saturday, or Sunday, this week is considered the last week of the previous year.

“Full Week” Rule

The first week of a year is the week that begins with a day matching the firstDayOfWeek option value. For example, if the first day of the week is Sunday, the first week of the year begins with the first Sunday.

Default Rule

This rule is driven by locale. If a week starts on Monday, the firstFourDays rule is applied. Otherwise, the firstDay rule is in effect.

For example, if a user lives in the US, South Korea, or India, the firstDay rule is used. If a user lives in France or UK, the firstFourDays rule is applied instead.

Custom Rule

You can always implement your own week enumeration logic. Use the cellTemplate function for this purpose. Review our custom rule implementation in the weekNumberRule API section for more information.