All Components

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.
<div id="vueapp" class="vue-app">
        <kendo-calendar :value="new Date()"
                        :week-number="true"
                        :month="month">
        </kendo-calendar>
    </div>

    <style>
      .italic{
        font-style: italic;
      }
      .custom{
        font-weight: bold !important;
    }
    </style>
Vue.use(DateinputsInstaller);
new Vue({
    el: "#vueapp",
    data: {        
        month: {
            content: '<div class="custom">#=data.value#</div>',
            weekNumber: '<a class="italic">#= data.weekNumber #</a>'
        }
    }
})

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