month Object
Templates for the cells rendered in the calendar "month" view.
month.content String
Template to be used for rendering the cells in the calendar "month" view, which are in range.
Example - specify cell template as a string
<input id="datetimepicker" />
<script id="cell-template" type="text/x-kendo-template">
<div class="#= data.value < 10 ? 'exhibition' : 'party' #"></div>
#= data.value #
</script>
<script>
$("#datetimepicker").kendoDateTimePicker({
month: {
content: $("#cell-template").html()
}
});
</script>
month.weekNumber String
The template to be used for rendering the cells in "week" column. By default, the widget renders the calculated week of the year. The properties available in the data object are:
- currentDate - returns the first date of the current week.
- weekNumber - calculated week number.
These properties can be used in the template to make additional calculations.
Example - specify week number template as a string
<style>
.italic{
font-style: italic;
}
</style>
<body>
<input id="datetimepicker1" />
<script id="week-template" type="text/x-kendo-template">
<a class="italic">#= data.weekNumber #</a>
</script>
<script>
$("#datetimepicker1").kendoDateTimePicker({
weekNumber: true,
month: {
weekNumber: $("#week-template").html()
}
});
</script>
month.empty String
The template used for rendering cells in the calendar "month" view, which are outside the min/max range.
Example - specify an empty cell template as a string
<input id="datetimepicker1" />
<script>
$("#datetimepicker1").kendoDateTimePicker({
month: {
empty: '-'
}
});
</script>
Example - add date value to the out-of-range cells
<input id="datetimepicker2" />
<script>
$("#datetimepicker2").kendoDateTimePicker({
month: {
empty: '<span style="color:\\#ccc;padding:0 .45em 0 .1em;">#= data.value #</span>'
}
});
</script>