WeekNumber and Year in Calendar Month View

Environment

Product DatePicker for Progress® Kendo UI®, DateTimePicker for Progress® Kendo UI®, Calendar for Progress® Kendo UI®
Product Version 2019.2.514

Description

How can I format the weekNumber section in the calendar to include the year in the Kendo UI DatePicker, DateTimePicker, or Calendar?

Solution

The weekNumber can be formatted in the month.weekNumber configuration using a template. There are two properties which can help modify its appearance: currentDate and weekNumber.

    <script id="week-template" type="text/x-kendo-template">
       <a>#= data.weekNumber # - #= getYearFromWeekNumber(data) #</a>
    </script>

To handle the last and first week of a year from being one year behind, create a custom function which will return the correct year.

      function getYearFromWeekNumber(data) {
        var year = data.currentDate.getFullYear();
        if (data.weekNumber == 1 && data.currentDate.getMonth() == 11) {
          year++;
        }
        return year;
      }

Finally, modify the CSS based on your preferences of the weekNumber column so it is wide enough for the content.

      .k-calendar .k-content .k-alt {
        width: 70px;
      }
    <style>
      .k-calendar .k-content .k-alt {
        width: 70px;
      }
    </style>
    <input id="datepicker1" />

    <script id="week-template" type="text/x-kendo-template">
       <a>#= data.weekNumber # - #= getYearFromWeekNumber(data) #</a>
    </script>

    <script>
      function getYearFromWeekNumber(data) {
        var year = data.currentDate.getFullYear();
        if (data.weekNumber == 1 && data.currentDate.getMonth() == 11) {
          year++;
        }
        return year;
      }

      $("#datepicker1").kendoDatePicker({
        weekNumber: true,
        month: {
          // template for dates in month view
          weekNumber:  $("#week-template").html()
        },
      });
    </script>

See Also

In this article
Not finding the help you need? Improve this article