Calculation when drags in scheduler timeline

I’m trying to create a custom extend add functionality for creating events.

Let me try to explain what i’m trying to build.
I’ve a table that shows events, where every events has an duration time.
Then i use the scheduler timeline with a timestep for 15 min.

When hovering on a cell, the cell gets divided into 4 picies (15 min time interval), see image

But the calculation to set the width for every piece is rather strange.
For example when i drag an existing event one hour to left, where one
cell has a widht of 17px, i get the following result

start pos  : 290px
+15min   : 294px
+15min   : 299px
+15min   : 303px
Final pos : 307px;

If you look at the difference it goes like this: 4px, 5px, 4px, 4px
Total 17px.

Could somebody tells me how this calculation is being made, so that i’ve 4 correctly divided picies

The end result, for what i’m trying to create is: when a user selects a event from the table the duration will be stored into
a js variable. When the user hovers a timeline cell it will highlight a number of pieces where it could be planned. When the user
clicks it will be actually stored into the timeline.

Hi, You can try to use markedTimespan functionality to highlight the area in the scheduler, it will allow to skip all math calculations, api will take start and end time and render the marker for that timespan.

docs.dhtmlx.com/scheduler/api__s … espan.html

As for math, its quite simple, if we have 17px for 4 units, then

var unit = 17/4; // = 4.25;
var correction = 0;

first = round(unit+correction); // 4
correction += round(unit+correction)-first; // 0.25

second= round(unit+correction); // round(4.25+0.25)=5
correction = round(unit+correction)-second; // -0.5

third= round(unit+correction); // round(4.25-0.5)=4
correction = round(unit+correction)-third; // -0.25

fourth= round(unit+correction); // round(4.25-0.25)=4
correction = round(unit+correction)-fourth; // 0