I just want to color weekends (Fri and Sat) differently. They should be working time, nothing special. Just different background. Can't find how to do it...
Support Forum
Hello.
You can try using TimeRanges feature as we show in this demo: https://bryntum.com/examples/scheduler/timeranges/
You can do it on per-resource basis with ResourceTimeRanges feature: https://bryntum.com/examples/scheduler/resourcetimeranges/
In the resource time ranges doc we show how to add recurrence support if you don't want to generate records manually: https://bryntum.com/docs/scheduler/#Scheduler/model/ResourceTimeRangeModel
You can try adding same mixins to the TimeSpan model and regular Store, instantiate store and provide it to the scheduler config: https://bryntum.com/docs/scheduler/#Scheduler/view/Scheduler#config-timeRangeStore
Smth like:
class MyTimeRange extends RecurringTimeSpan(TimeSpan) {};
class MyTimeRangeStore extends RecurringTimeSpansMixin(Store) {
static get defaultConfig() {
return {
modelClass : MyTimeRange
};
}
};
const store = new MyTimeRangeStore ({
data : [{ {
id : 1,
startDate : '2019-01-01T11:00',
endDate : '2019-01-01T13:00',
name : 'Coffee break',
// this time range should repeat every day
recurrenceRule : 'FREQ=DAILY'
}]
});
new Scheduler({
timeRangeStore : store
})
I've added weekends for a few months back and forward as distinct ranges. Can I color them in vertical mode?
I see how to color the label, but not the strip itself:
https://www.dropbox.com/s/kpdxz5ewfgk3cqt/Screenshot%202021-09-29%20174436.jpg?dl=0
took it from this sample:
https://bryntum.com/examples/examples-scheduler/timeranges/
ok, it's a bit more complex:
.b-grid-subgrid .b-sch-foreground-canvas .weekend {
background: repeating-linear-gradient(-55deg, #ddd, #ddd 10px, #eee 5px, #eee 20px);
opacity: 0.7;
color: #926b36;
}
.b-grid-header .b-sch-timerange.weekend,
.b-grid-subgrid .b-verticaltimeaxiscolumn .b-sch-timerange.weekend {
background: #a1d2fa;
opacity: 0.8;
color: white;
}