Open filipKovachev opened 1 year ago
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
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:
Click on any date in the Calendar.
Notice how the scroll is shifted to a random location.
https://stackblitz.com/edit/react-mwvw7j-qc6rcp?file=app%2Fmain.tsx
Ticket ID: 1616076