Scheduler becomes slow when zoomed out to Year view with marked timespans

Scheduler
#1

Hi DHTMLX Team,

I’m using DHTMLX Scheduler (Timeline / Tree Timeline view) in my Angular application to display employee shifts, holidays, and leave availability.

Everything works well for day, week, and month zoom levels — but when I zoom out to “Year” view, the scheduler becomes significantly slower (scrolling, zooming, or redrawing).

Here’s an outline of what I’m doing

markTheHolidays(): void {
const oHolidaylist = this.oConfigurationService.getHolidaysList();
const strToDate = this.oSchedulerInstance.date.str_to_date(“%Y-%m-%d”);

// Mark weekends
if (oHolidaylist.enableWeekends) {
oHolidaylist.weekends.forEach(day => {
this.oSchedulerInstance.addMarkedTimespan({
days: day,
zones: “fullday”,
css: “weekend_style”
});
});
}

// Mark holidays
oHolidaylist.holidays.forEach(date => {
const endDate = new Date(strToDate(date));
endDate.setDate(endDate.getDate() + 1);
this.oSchedulerInstance.addMarkedTimespan({
start_date: strToDate(date),
end_date: endDate,
css: “holiday_style”
});
});

this.oSchedulerInstance.updateView();
}
I also mark employee leaves and shifts with additional calls to addMarkedTimespan() for each participant row and time range.
When I switch to the Year zoom level, performance drops dramatically — likely because of the large number of marked spans and cells rendered.

#2

Hello,

Unfortunately, I was not able to reproduce your issue locally.
The following snippet seems to work correctly for me:
DHTMLX Snippet Tool ;
I tried to reproduce the same code in a simplified Angular demo:
angular-scheduler-demo.zip (1.7 MB)
but it seems to work correctly to me.
To check the demo, use the following commands after unarchiving it:

yarn 
yarn start 
//or
npm install
npm run start

It’s hard to suppose what exactly goes wrong in your case without more details. Could you provide your data to reproduce the problem? Could you please reproduce the issue in the snippet above (open the snippet => reproduce the issue => click the “Save” button => send me the new link)?