[REACT] scheduler.scrollToDate function does not work in some cases

[afgrundsvisioner]

Hi,
The application the I currently work on requires initial Scheduler timeline view to be set at a start of a current date.
To achieve that I use Bryntum's scheduler.scrollToDate built-in function.

Initially I've invoked that function during comonentDidMount event using useEffect hook.
But with this approach for some reason jumping to today does not work sometimes, approximately each 4-5 page reload.

So I assumed that it was happening because a comonentDidMount event, on which jumpToToday function is invoked, is being fired before an actual Event date is being populated to Scheduler timeline. Which causes a jumpToToday function to being called but bypass and not set the timeline view into today view in a result.

I've tried hooking into EventStore load event and some other event that was seem appropriate to me, but no success was achieved by doing so.

So I've implemented a hack:

1. Attached ResizeObserver to a Scheduler container element
2. Calling jumpToToday function once resize event occured with the delay of 300ms

I did that because a Scheduler container resize event is a strict sign of an Event data being populated into a timeline — once events get rendered, the size of Scheduler grows vertically.

BUT initially that produced the same effect. So I added additional 300ms setTimeout for calling jumpToToday function. And that finally seems to work.

But the problem is that the approach with the ResizeObserver and setTimeout set within in is bad and overcomplicates things.

What is the reason from this issue to happen?
And what are better solutions to that?

For clarity, I've attached an additional video briefing with the explanation of an issue.

[marcio]

Hey afgrundsvisioner,

The project that you showed in the video looks nice. Would be possible to share the code for us to check? Or trying to assemble a sample project with that issue that you showed in the video.

You mentioned that perhaps our Suite could have some kind of hooks that would interfere with the scrollToDate, I can confirm that is not the case. But as it seems to be a more complex issue, we would need to check some code to debug and analyze what could be causing the behavior that you showed in the video.

[afgrundsvisioner]

Give me your email, I'll send you an archive with the project source code.

[alex.l]

Please send it to support at bryntum.com

[afgrundsvisioner]

where i should send it more specifically?

All the links at https://bryntum.com/support/ forwards to this forum or no general contact form for potentional customers.

[marcio]

Hey,

You can forward it by email to support@bryntum.com

[Animal]

It might be better to use this if possible: https://bryntum.com/products/calendar/docs/api/Scheduler/view/Scheduler#config-visibleDate

[afgrundsvisioner]

@marcio I've send a project source code to your side via email targeting support@bryntum.com address.

[afgrundsvisioner]

@animal your seggestion seems to be working.
But with visibleDate set to now, the initial view gets opened too far to the right.
Is it possible to set the view in way, so the «initial date» would be on most left side of the view? Attached screenshot with an example.

Also, what is the shape of the visibleDate options object, that represents scrollToDate action?
The shape is not documented in the docs and there is no TypeScript interface describing that shape.

[afgrundsvisioner]

So, with visibleDate added to Bryntum config, the initial date centering works better but still misses sometimes, although it happens more rarely in comparison to my first approach with ResizeObserver + scrollToDate.

        visibleDate:            dayjs().add(2, 'months').toDate(), // ? a date that is centered in view once scheduler is initialized

Now it misses date centering each ₁₅ time.
Attached a new video with an example reproduction on which date center miss happens of 13th and 14th page reload.