The DatePicker control for Angular has a hidden vertical scrollbar on the kendo-virtualization element, which is nested inside the kendo-calendar-navigation and kendo-calendar-viewlist elements. Though it is hidden from view, it is still clickable, and can obscure the selectable dates in the calendar. Clicking it results in activating the scrollbar, which will result in the navigation sidebar scrolling.
I have attached two screenshots to show the affected areas. Highlighted in red are the areas that when clicked will activate the sidebar scrollbar, and highlighted in blue is the area that will activate the calendar scrollbar, along with their respective elements in the DOM.
It appears the scrollbar is hidden from view via a combination of padding and margin settings from the css below:
.k-calendar .k-content.k-scrollable,
.k-calendar .k-calendar-content.k-scrollable {
box-sizing: content-box;
overflow-x: hidden;
overflow-y: auto;
display: block;
padding-right: 100px;
padding-left: 100px;
margin-left: -100px;
margin-right: -117px;
}
I am using Edge Version 105.0.1343.50