How can I add JAN to the Kendo DatePicker (Angular2) pop-up left navigation, it currently shows the year then FEB

Question

When I open the DatePicker with a Month picker on the left navigation, there is no January option, you have to select the year which represents JAN; this is confusing to my users. I'd like to see the year when I scroll down, and see a JAN below 2020, 2021, etc.

Answer 1

You can use the kendoCalendarNavigationItemTemplate template to customize the way the navigation entries are shown.

Here's a simple example that adds " Jan" after the year number:

@Component({
    selector: 'my-app',
    styles: ['/deep/ .k-calendar-navigation .k-content li { padding: 0; }'],
    template: `
        <kendo-calendar>
            <ng-template kendoCalendarNavigationItemTemplate let-title>
                {{isNaN(title) ? title : title + " Jan"}}
            </ng-template>
        </kendo-calendar>
    `
})
class AppComponent {
    public isNaN = isNaN;
}