Day Template

The MultiViewCalendar enables you to customize the rendered day for the month view.

The following example demonstrates how to create a MultiViewCalendar by using a custom template.

<div id="vueapp" class="vue-app">
    <kendo-multiviewcalendar :month="month" :week-number="true"></kendo-multiviewcalendar>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        month: {
            content: '<div class="custom">#=data.value#</div>',
            weekNumber: '<a class="italic">#= data.weekNumber #</a>'
        }
    }
})

The template wraps the value in a <div> HTML element.

The following example demonstrates the structure of the data object that is passed to the template function.

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