Add Week Numbers and Years to the 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

  1. Format the weekNumber in the month.weekNumber configuration by using a template. To modify the appearance, use the currentDate and weekNumber properties.

    ```javascript
        <script id="week-template" type="text/x-kendo-template">
           <a>#= data.weekNumber # - #= getYearFromWeekNumber(data) #</a>
        </script>
    ```
    
  2. 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.

    ```javascript
          function getYearFromWeekNumber(data) {
            var year = data.currentDate.getFullYear();
            if (data.weekNumber == 1 && data.currentDate.getMonth() == 11) {
              year++;
            }
            return year;
          }
    ```
    
  3. Based on your preferences, modify the CSS of the weekNumber column so it is wide enough for the content.

    ```CSS
          .k-calendar .k-content .k-alt {
            width: 70px;
          }
    ```
    

The following example demonstrates the full implementation of the suggested approach.

    <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