Add Week Numbers and Years to the Calendar Month View
Environment
| Product | Progress® Kendo UI® DatePicker for jQuery | Progress® Kendo UI® DateTimePicker for jQuery | Progress® Kendo UI® Calendar for jQuery | 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
-
Format the
weekNumberin themonth.weekNumberconfiguration by using a template. To modify the appearance, use thecurrentDateandweekNumberproperties.```javascript <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.
```javascript function getYearFromWeekNumber(data) { var year = data.currentDate.getFullYear(); if (data.weekNumber == 1 && data.currentDate.getMonth() == 11) { year++; } return year; } ``` -
Based on your preferences, modify the CSS of the
weekNumbercolumn 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>