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


The Calendar enables you to use templates and customize its month view.

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:

  • currentDateReturns the first date of the current week.
  • weekNumberThe calculated week number.
View Source
Edit In Stackblitz  
Change Theme:

The following example demonstrates how to customize the day which the Calendar renders for its month view. The template wraps the value in a <div> HTML element.

data = {
	date: date, // Date object corresponding to the current cell
	title: kendo.toString(date, "D"),
	value: date.getDate(),
	dateString: "2011/0/1" // formatted date using yyyy/MM/dd format and month is zero-based

In this article

Not finding the help you need?