How to detect if there are events above/beneath view area

Scheduler Javascript
#1

Hello!

In a day/week view I have time from 00:00 - 23:00. The calendar height can fit only part of the time scale so there is scrolling. I have requirement to draw some mark that will indicate are there more events above/beneath current view area. This mark should be dynamic while scrolling.

So I need:

  1. Detect are there events not inside current view area (need to scroll to view them)
  2. Hook scroll event to adjust this mark.

Thank you for the perfect product and for your answers,

Aleksei.

#2

Hi,

You can detect which hours are visible using the height and scrollTop of the data area of the calendar. Height of an hour on a scheduler scale is known from the configuration.
I.e.

first_visible_hour = scheduler.config.first_hour + (scrollTop / scheduler.config.hour_size_px); last_visible_hour = scheduler.config.first_hour + ((height + scrollTop) / scheduler.config.hour_size_px);

docs.dhtmlx.com/scheduler/api__s … onfig.html
After that you can get all events that are shown in current view:var state = scheduler.getState(); var events = scheduler.getEvents(state.min_date, state.max_date);
and check if some of them starts after the last visible hour:

for(var i=0; i < events.length; i++){ if(events[i].start_date.getHours() >= last_visible_hour) return true; } return false;

Unfortunately there is no ready hooks for a scrolling events or a scroll position in scheduler, so you’ll have to attach this events and calculate height/scrollTop manually. The required dom element is .dhx_cal_container > .dhx_cal_data

Please note, the code above should give a basic impression of the possible approach, however, I didn’t tested it with the actual scheduler so i can’t guarantee all parts works as expected

docs.dhtmlx.com/scheduler/api__s … vents.html
docs.dhtmlx.com/scheduler/api__s … state.html
docs.dhtmlx.com/scheduler/api__s … onfig.html

#3

Thank you Aliaksandr! that looks promising, will make update a bit later if it was working for me.