New to Kendo UI for Vue? Start a free 30-day trial

Week Number Column

In the Calendar, you can render a column which displays the number of the weeks within the current month view and use the week number template to customize the cells in the Week column.

Rendering Week Numbers

The weekNumber option enables you to display the week number on an annual base to the left side of the month view and as a separate column.

<kendo-calendar :week-number="true"></kendo-calendar>

Customizing Column Cells

To customize the week column cells, use the week number template. By default, the Calendar renders the calculated week of the year.

You can use the following available properties in the data object within the template to make additional calculations:

  • currentDate—Returns the first date of the current week.
  • weekNumber—The calculated week number.