month Object

Templates for the cells rendered in "month" view.

month.content String

The template to be used for rendering the cells in "month" view, which are between the min/max range. By default, the widget renders the value of the corresponding day.

Example - specify cell template as a string

<style>
  .exhibition{
    background-color: #9DD0E0;
    color:black;
  }
  .party{
    color: red;
    background-color: #ccc;
  }
</style>
<body>

<div id="calendar"></div>
<script id="cell-template" type="text/x-kendo-template">
    <div class="#= data.value < 10 ? 'exhibition' : 'party' #">
    #= data.value #
  </div>
</script>
<script>
  $("#calendar").kendoCalendar({
    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>

<div id="calendar"></div>
<script id="week-template" type="text/x-kendo-template">
   <a class="italic">#= data.weekNumber #</a>
</script>
<script>
  $("#calendar").kendoCalendar({
    weekNumber: true,
    month: {
      weekNumber: $("#week-template").html()
    }
  });
</script>

month.empty String

The template to be used for rendering the cells in the "month" view, which are not in the min/max range. By default, the widget renders an empty string.

Example - specify an empty cell template as a string

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar({
        month: {
           empty: '-'
        }
    });
</script>
In this article