How to implement an infinite (almost) calendar?

Question

JavaScript

clauderic.github.io/react-infinite-calendar/#/basi... We
need to implement a similar calendar with up and down scrolling.
The problem is that the required range of years in my case is 200. And in this solution, we just rendered 70, all at once.
As you understand, loading 200 years at once is too costly for performance, but I didn’t manage to load parts in parts, because after re-rendering, the height of the block changes and after inserting, for example, the previous year, it shows the top of the content, resetting the scroll to the beginning of the block.

The height of the block of each year is different (because the number of weeks in a month is different), so all the manipulations with the height and manual transition to a certain coordinate are quite complicated, and in general, overcoming the scroll jump using scrollTo is a rather crutch solution, this will be noticeable leap.

How can you cope with jumping scroll and generate and insert data without the user noticing?
I write with react hooks.

Answer 1

Quite a dubious decision in terms of interface design.
For 70 years it’s hard to manage and scroll to the right place, and even for 200 years - but in life you can’t rewind where you need to.
But if you still really need it, then you better change your approach to the problem. See:
1. The user can slowly scroll down (you can download as you scroll)
2. The user can immediately poke at the end or in the middle (and here the problem is to load everything that the user has skipped).
But the creators of the maps have already solved the problem before us!
Whether it's Google Maps, Yandex Maps or something else - everything is loaded and rendered there in a completely different way, depending on the coordinates that you have opened.
Accordingly, your task can be solved in a similar way.
1. You create a huge (but completely empty) layer. The width of your calendar, and a height of many thousands of pixels
2. You will calculate this height based on the number of years that you have in the config.
3. Next, after the user has scrolled to some point, you will have to calculate the viewport + scrollTop
4. Based on this data, you will render only 2-3 years of the calendar that coincide with the coordinates that the user has scrolled to and show them in these coordinates with using position-absolute
5. Something like this.
+ This method is much more reliable than scrolling in a row and black magic with drawing elements and jumping scroll
+ This method will allow you to render only those parts of the calendar that the user sees. What is outside the viewport will not be rendered and, accordingly, will not slow down.
- We'll have to sit well, think, remember matan)

Answer 2

Well, I would do something differently, something like this:
There is a window of about one month, i.e. for six weeks (because a month of 31 days takes four weeks three days, and these three days can be in different weeks). It shows exactly what fits. Scrolling with the mouse wheel will move you one week per click of the wheel. At the same time, there is no scroll bar on the right, there are strictly six weeks.
And on the side - the ability to click to select the month and year. Not a drop-down list, but always expanded; months should fit on the screen, and years should scroll. However, whether a scroll is needed should be determined by the fact that the list fit into the screen.