New to Kendo UI for jQuery? Start a free 30-day trial

Month

configuration

Templates for the cells rendered in the calendar "month" view.

month

Object

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
    month: {
        content: '<div class="custom">#= data.value #</div>'
    }
});
</script>

month.content

String

Template to be used for rendering the cells in the calendar "month" view, which are in range.

<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.empty

String

The template used for rendering cells in the calendar "month" view, which are outside the min/max range.

<input id="datetimepicker1" />
<script>
$("#datetimepicker1").kendoDateTimePicker({
    month: {
       empty: '-'
    }
});
</script>

<input id="datetimepicker2" />
<script>
$("#datetimepicker2").kendoDateTimePicker({
    month: {
       empty: '<span style="color:\\#ccc;padding:0 .45em 0 .1em;">#= data.value #</span>'
    }
});
</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.

<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>