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.
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.
All the best,
Alex
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.
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.
All the best,
Alex