Get the ranges of dates that are visible

Scheduler
#1

Hi
I am using a timeline component. I want to implement a feature to scroll the view to the start of the next event that is not visible, taking in account the events currently shown.

I know that I can get the date that correspons to the left position of the viewport, using this code

const currentView = this.scheduler.getCurrentView();
new Date(currentView.dateFromPos(currentView.getScrollPosition().left));

Is it possible get the date that corresponds to the right position of the viewport? With this value I can calculate the start date of the next event and scroll to this date.

Thanks in advance

#2

Hello @darioschmidt,

Unfortunately there is no built-in function for that, but technically it can be done using JS and scheduler API.

The idea could be to create a cycle, and check out events for each date of the view, if there are events, you can check out if there are existing as HTML elements with the getRenderedEvent(scheduler renders some events in close range outside of viewport).
If there are visible you can check if there are actually displayed in the viewport with the JS, here is example of code that can check it:

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) && 
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight; 
};

And if it’s not visible, you can scroll the scheduler to display it.

Here is a demo(it’s still can be simplified, but displays on how your requirement can be implemented):
https://snippet.dhtmlx.com/vf8d7b0f

Kind regards,