| title | page_title | description | slug | canonicalLink | position |
|---|---|---|---|---|---|
Templates |
Templates - Calendar - Kendo UI for Vue |
Customize the content of the Kendo UI Calendar in Vue projects. |
templates_calendar_wrapper |
7 |
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.
{% meta height:350 %} {% embed_file calendar/templates/main.vue preview %} {% embed_file calendar/templates/main.js %} {% endmeta %}
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
};