Scheduler/Timeline/Scroll position

Scheduler
#1

Hi all,

I’m wondering if it’s possible to identify the earliest visible date on a scrollable timeline.
e.g.
Assume my scrollable timeline runs from 01-JAN-2020 to 31-DEC 2020.
If I’m scrolled such that 23-FEB-2020 is the earliest visible date on my timeline, can I identify that fact? I’m asking because if I zoom in or out, I’m placed at the pixel position before zooming, not the date position. Calling
scheduler.getView().getScrollPosition()
before and after zooming confirms this. The pixel position is the same, but the earliest visible date in the timeline is completely different to that before zooming.

Thanks in advance,
Steve

#2

Hi Steve,

Assume my scrollable timeline runs from 01-JAN-2020 to 31-DEC 2020.
If I’m scrolled such that 23-FEB-2020 is the earliest visible date on my timeline, can I identify that fact?

There is not a ready method in API. But it’s possible to implement a custom solution. DOM elements of scale cells of the timeline https://prnt.sc/qr5vcc contain column dates and indexes. In a scrollable timeline when smart rendering is enabled, only visible cells are rendered into DOM. If we select all cells from the timeline header, the one with the lowest index will be the cell with an earliest visible date and we’ll be able to get the date value from its DOM attribute. Note, that some rendered cells can be hidden under the timeline label column http://prntscr.com/qr5wed, you may need to account for that. Here is a live demo showing how it can be implemented:
http://snippet.dhtmlx.com/0df175004

I’m asking because if I zoom in or out, I’m placed at the pixel position before zooming, not the date position. Calling
scheduler.getView().getScrollPosition()
before and after zooming confirms this. The pixel position is the same, but the earliest visible date in the timeline is completely different from that before zooming.

I have zoomed the browser page in and out, but the earliest visible date remained the same. I`ve used this example:
https://snippet.dhtmlx.com/17ce3605c
And here is a screen recording of what exactly I’ve tried: https://recordit.co/Xq4mW9l0s2

If this did not solve your problem, please send your sample where I can reproduce the issue. You can modify this snippet and generate an updated link by pressing the ‘Share’ button on top:
https://snippet.dhtmlx.com/29dd2e6d4

#3

Hi Ales,

Thanks for getting back with a suggestion. Reading my own question back, I realise it isn’t that clear! Apologies!

What I’m referring to is …

This is my minimum date:
image

This is my maximum date:
image

I’ve dragged my scrollbar to 01-APR-2020:
image

Now, if I zoom in and do not touch the scroll bar, I’m positioned at 17-MAR-2020, not 01-APR-2020 which is where I, as a user, I would expect to be:

image
image707×139 2.23 KB

So, in this case, I need to preserve somehow 01-APR-2020 so that I can re-position the region correctly. Unfortunately, the method you kindly suggested is giving me inconsistent results. In this case, 01-APR-2020 is here …

image
image1138×87 9.39 KB

Any help gratefully received!

Many thanks in advance,
Steve

#4

Hi Ales,

Your solution inspired me to try a slightly different method. This, I think, isn’t a million miles away from what I’m trying to achieve.

Thanks,
Steve

function identifyLeftmostVisibleDate() {

// Identify where the scrollbar is in relation to the minimum date ...
var currentScrollPosition = scheduler.matrix["timeline_name"].getScrollPosition();

// Now identify the column IDs of all of the visible date elements in the scale bar
var dateColIdsInTimeline = document.querySelectorAll('.dhx_scale_bar[data-col-date]');

// Now loop over each element in the scale bar.
for ( var colIndex = 0; colIndex <= dateColIdsInTimeline.length - 1; colIndex++ ) {

	// Account for the width of the y-axis when determining the scroll position under
	// consideration. The timeline label partially overlaps the rendered timeline.
	// Ours is 200px wide.
	var leftmostVisibleDateScrollPosition = dateColIdsInTimeline[colIndex].offsetLeft - 200;

	// If the scroll position of the cell under consideration exceeds the timeline
	// scroll position, we have the column we need - it is the one prior
	if ( leftmostVisibleDateScrollPosition > currentScrollPosition.left ) {

		var dateToReturn = dateColIdsInTimeline[colIndex - 1].getAttribute("data-col-date");
		break;

	}

}

return dateToReturn;

}

#5

Hi Steve,
It looks like a good way to use this function when you want to get the earliest visible date.

#6

Thanks Ales. I did notice that at extreme zoom-out settings, the order of the elements from .dhx_scale_bar couldn’t be relied on. Overcame this by loading the offset and date values into an array, sorting that first then using that array to base the identification off.

1 Like