[REACT] How to break an event for a defined pause time.

[netten.mehra]

Hi, I want to break an event at a particular time (example during lunch break) while I am doing event resize. How can I achieve this?

I have attached a screenshot of what I want to achieve.

46b639d0-e77e-4647-a9a4-769d920327c8.png (17.84 KiB) Viewed 363 times

[mats]

Would it suffice to move the lunch element to the front in the z-index stack to obscure your Maintenance task?

[netten.mehra]

Yes, that could be done as well. How can I achieve that?

[mats]

Add this CSS:

.b-timeline-subgrid .b-sch-timerange {
    z-index:10;
}

[netten.mehra]

Hi, unfortunately this solution doesn't seem to be working.

[tasnim]

Working fine here. Image attached below

[netten.mehra]

I want to completely hide an event when it is on a non working time (Exactly the way I have attached the image above) .But the image that you attached I can still see the event visible in the gray portion.

[alex.l]

You can change styling of "gray portion" and remove opacity. But I am not sure you will be happy with result, because event texts may be hidden under grey area. So, you need to manage that as well.
To manage event content we have https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer
You can put some extra CSS/HTML to make it look better if you need.

[netten.mehra]

The gray portion is being implemented using 'ResourceTimeRangeModel'. And this is how we are making it gray.

resourceTimeRanges.push({
        resourceId: resource?.id,
        timeRangeColor: 'gray',
        startDate: `2000-01-01T${lunchBreak[0]}`,
        duration: lunchBreak[1] - lunchBreak[0],
        durationUnit: 'h',
        recurrenceRule: 'FREQ=DAILY',
      });

So I don't think I can change the css of this gray portion.

[alex.l]

Color and opacity - are different style properties. You already have example how to change CSS for all time ranges

.b-timeline-subgrid .b-sch-timerange {
    z-index:10;
}

You can just add extra line in here, or apply custom cls with https://bryntum.com/docs/scheduler/api/Scheduler/model/ResourceTimeRangeModel#field-cls and define your styling in there.