Scheduler seems to incorrectly render events which are “out of boundaries” when first_hour is used (maybe it affects last_hour as well - I have not tested that).
The first hour is set to 8am. Notice the overlapping (the events are set to .5 opacity in the CSS)
The red and the blue events are from 7am till 8am and thus out of bounds and should not be rendered.
The yellow event is overlapping them both and is the only one correctly rendered.
It looks like setting 0 seconds on an event forces it to render. This you can test with the red event. I assume it is happening with the json (blue) event as well when you convert it from string.
An override/workaround would be REALLY appreciated! This is a blocking issue for me because it will be used in different timezones and thus this can occur any time. Thanks.
I decided to look into this myself because I don’t have enough time to wait to get this fixed. You are missing a check for this condition in scheduler._is_visible_events.
Hello,
Thank you for notice of the incorrect rendered events with setSeconds method. I sent it to the dev team and they will fix it in the future, but I cannot give you any ETA.
As workaround, you can manually filter events, with the filtering functionality: https://docs.dhtmlx.com/scheduler/filtering.html
You can create a function to check the condition for displaying events in the required range:
function isEventVisible(event) {
var evFirstHour = event.start_date.getHours(),
evLastHour = event.end_date.getHours() + (event.end_date.getMinutes() / 60),
lastHour = scheduler.config.last_hour,
firstHour = scheduler.config.first_hour;
var endDatesVisible = !((evLastHour > lastHour || evLastHour <= firstHour) && (evFirstHour >= lastHour || evFirstHour < firstHour));
if (!endDatesVisible) {
return false;
} else {
//event is bigger than area hidden between last/first hours
var eventDuration = (event.end_date.valueOf() - event.start_date.valueOf()) / (1000 * 60 * 60),//hours
hiddenDuration = 24 - (scheduler.config.last_hour - scheduler.config.first_hour);
if (!((eventDuration > hiddenDuration) || (evFirstHour < lastHour && evLastHour > firstHour))) {
return false;
}
}
return true;
}
And filter events which should be displayed in the scheduler:
scheduler.filter_day = scheduler.filter_week = function (id, event) {
var eventVisible = isEventVisible(event);
if (!eventVisible) {
return false;
}
return true;
};