Templates

The DateTimePicker supports custom templates for its month view.

The following example demonstrates how to implement a month-view template in the DateTimePicker.

<div id="vueapp" class="vue-app">    
    <kendo-datetimepicker   :value="today"
                            :week-number="true"                        
                            :month="month"
                            :footer="footer"                        
                            ></kendo-datetimepicker>
</div>
<style>
.italic{
    font-style: italic;
}
.custom{
     font-weight: bold !important;
}
</style>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data() {
        return{    
            today: new Date(),           
            month: {              
              content: '<a class="custom">#= data.value #</a>' ,
              weekNumber:  '<a class="italic">#= data.weekNumber #</a>'
            },
            footer: "Today - #=kendo.toString(data, 'd') #"
       }
    }
})  

In this article