[ANGULAR] color weekends
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...
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...
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
But for time ranges there is no recurrence. Am I supposed to add tons of weekends? Ok, probably I can add +/- 1 year, I doubt anyone will look further
And I don't need it on resource level, just in general.
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
Sure you can schedule them using basic CSS (via cls
field available in the TimeSpan model)
This is what I did, but the class is applied only to the range label. I couldn't even find an element that draws the background of the range...
aha, this is how it's done:
.b-grid-subgrid .weekend {
background: repeating-linear-gradient(-55deg, #ddd, #ddd 10px, #eee 5px, #eee 20px);
opacity: 0.7;
color: #926b36;
}
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;
}