Templates

The DatePicker supports custom templates for its month view.

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

<div id="vueapp" class="vue-app">   
    <kendo-datepicker   :value="today"
                        :week-number="true"                        
                        :month="month"
                        :footer="footer"                        
                        ></kendo-datepicker>
</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