Templates

The DateRangePicker supports custom templates for its month view.

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

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

In this article