Our pure JavaScript Scheduler component


Post by eugenem »

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...


Post by Maxim Gorkovsky »

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


Post by eugenem »

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.


Post by Maxim Gorkovsky »

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 
})

Post by eugenem »

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


Post by mats »

Sure you can schedule them using basic CSS (via cls field available in the TimeSpan model)


Post by eugenem »

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...


Post by eugenem »

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;
}

Post by eugenem »


Post by eugenem »

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;
}

Post Reply