[BUG][Calendar] - Adding width and height to a custom cell causes scrolling issues

[filipKovachev]

When adding a custom cell in the Calendar with adjusted height and width, the scroll shifts the dates randomly. This can be reproduced in the following example, even if the styles are :

Steps to reproduce:

1. Click on any date in the Calendar.

2. Notice how the scroll is shifted to a random location.

https://stackblitz.com/edit/react-mwvw7j-qc6rcp?file=app%2Fmain.tsx

Ticket ID: 1616076

[kspeyanski]

This seems like internal DOMService of the calendar does not take into account customization applies through the cell renderer.

Currently, it's creating an empty <td /> element on the page prior to initializing the infinite-scroll (virtualization), in order to calculate it's dimensions. However, it's only applying the k-calendar-td className and does not inherit the rendering of a custom Cell renderer.

A workaround for this would be to style cells through the k-calendar-td selector instead.

Extending the DOMService to account for custom renderers is a hurdle on it's own, but won't completely solve the problem, as the calendar's (and a couple more elements) height's are controlled through the css and inherits the cell's dimensions in order to be big-enough to fit just enough rows the calendar might render.

I would recommend approaching this through customizing the $kendo-calendar-cell-size sass-variable which would apply the necessary dimensions wherever needed. Here's an example on how this could be achieved: https://stackblitz.com/edit/react-mwvw7j-lqa2td?file=app%2Fkendo.scss