Scheduler Pro has a feature that shows non working time of resources: https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/feature/ResourceNonWorkingTime
It uses resource calendars to define which periods of time are non working.
You can see how it works in this demo: https://www.bryntum.com/examples/scheduler-pro/grouping/
The code to turn it on is pretty straightforward:
import 'your-path-to-scheduler-pro-root/lib/SchedulerPro/feature/ResourceNonWorkingTime.js';
...
new SchedulerPro({
...
features : {
resourceNonWorkingTime : true,
...