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

DevExtreme Team Blog
12 January 2023

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.

Calendar with a week number column

View Demo

Display Week Numbers (Column)

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


<Calendar ...

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)


<dx-calendar ...

“First Day” Rule

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

Week number rule: firstDay

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

Week number rule: firstFourDays

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

Week number rule: fullWeek

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.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.