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

Templates

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:

  • currentDate—Returns the first date of the current week.
  • weekNumber—The calculated week number.
Example
View Source
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?