Events misaligned on first render

Scheduler Javascript
#1

When my scheduler is first rendered on month view the events are all misaligned, with the exact number being 5px too high for each row above the event (something on the 4th row is 15px too high).

If the month view is rendered again without reloading the page all events shift down into their proper place. I have looked into this and it is not anything external effecting the event positions, as the numbers on the inline style are incorrect on first render. I have traced it back to the variable _colsS.heights being set a second time on initial render, with incorrect values. This does not happen on subsequent renders and the events are positioned correctly.

I cannot find where _colsS.heights is being set incorrectly or why it is only happening on the first render.

#2

Hello,

How can we reproduce the issue?

#3

Hi Polina,

I’ve attached the exact copy of dhtmlxscheduler.js I have been using (This is the original version however I also have been using a version that has been pretty printed and some console.logs added for debugging purposes, no other changes have been made and the issue is present with both files) and the additional code used is below.

Edit: I previously stated the issue was not present in august but that was my mistake and it appears to be present on every month at initial render

I have added a couple of console logs, one to each time a new value is added to the var _colsS.heights and one immediately before the variable is called to render the calendar. This results in this log on first render:

[0]
(2) [0, 103]
(3) [0, 103, 206]
(4) [0, 103, 206, 309]
(5) [0, 103, 206, 309, 412]
(6) [0, 103, 206, 309, 412, 515] ← Finished creating the var
(6) [0, 103, 206, 309, 412, 515] ← First call
(8) [0, 98, 196, 294, 392, 490, 588, 0] ← Second call

as you can see the variable is built, called once, and the called again with incorrect variables and somewhere between the two calls it has been reset with incorrect values.

Here is the result of the same code when the calendar is rendered again without reloading the page:

[0]
(2) [0, 103]
(3) [0, 103, 206]
(4) [0, 103, 206, 309]
(5) [0, 103, 206, 309, 412]
(6) [0, 103, 206, 309, 412, 515] ← Finished creating the var
(6) [0, 103, 206, 309, 412, 515] ← First and only call

Thanks for the help in advance, hopefully you can reproduce
dhtmlxScheduler_v4.4.0.zip (1.49 MB)

#4

Hi,

Unfortunately the issue isn’t reproduced using this code:
snippet.dhtmlx.com/9da71ddcf

Could you please provide with access to your app?