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

Week Numbers

You can configure the Calendar to display the week number and also use the week number template to customize the cells in the Week column.

Rendering of Week Numbers

The weekNumber option enables the Calendar to display the week number on an annual base to the left side of month view and as a separate column.

   <div id="calendar"></div>
   <script>
    $("#calendar").kendoCalendar({
        weekNumber: true
    });
  </script>

Customizing Week Column Cells

The week-number template intends to customize the cells in the Week column. By default, the Calendar renders the calculated week of the year.

The Calendar provides the following properties in the data object:

  • currentDate—Returns the first date of the current week.
  • weekNumber—The calculated week number.

You can use these properties in the template to make additional calculations.

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

See Also

In this article