Our pure JavaScript Scheduler component


Post by eugenem »

Is it possible to change background per resource? Say I want to differentiate between people and stations by color...


Post by mats »

Of course, set ”cls” on your resource which adds a CSS class to the row element and use the value to style using CSS


Post by eugenem »

Hmm, I see it in rows with horizontal orientation indeed. But in the vertical orientation, there are no such columns. In the same way, standard striping doesn't work in vertical mode...


Post by mats »

For vertical mode, the way to achieve your desired UI currently is by using https://bryntum.com/docs/scheduler/#Scheduler/feature/ResourceTimeRanges


Post by eugenem »

I've tried, and it went completely crazy when I try to scroll. All dates that are not in the viewport disappeared...

        var resourceTimeRanges = new List<dynamic>();
        foreach (var item in _db.Staff.OrderBy(x => x.Name))
        {
          resourceTimeRanges.Add(new
          {
            startDate = DateTime.Parse("2021-07-27"),
            duration = 2,
            name = "",
            timeRangeColor = "indigo",
            resourceId = "S_" + item.Id,
          });
        }


   
TypeError: Cannot read property 'parentElement' of null at StickyEvents.syncEventContentPosition (StickyEvents.js:180) at StickyEvents.verticalSyncAllEventsContentPosition (StickyEvents.js:114) at StickyEvents.onSchedulerScroll (StickyEvents.js:79) at SchedulerPro.trigger (Events.js:1095)


Post by saki »

And what if you just deliver resource time ranges in the server response as in our example: https://bryntum.com/examples/scheduler/resourcetimeranges/ ?

Something similar to this;

    resourceTimeRanges = [
        {
            id             : 1,
            resourceId     : 'r1',
            startDate      : '2019-01-01T11:00',
            endDate        : '2019-01-01T13:00',
            name           : 'Lunch',
            // this time range should repeat every day
            recurrenceRule : 'FREQ=DAILY'
        },
        { id : 2, resourceId : 'r8', startDate : '2019-01-01T11:00', endDate : '2019-01-01T13:00', name : 'Lunch' },
        { id : 3, resourceId : 'r9', startDate : '2019-01-01T11:00', endDate : '2019-01-01T13:00', name : 'Lunch' },
        { id : 4, resourceId : 'r10', startDate : '2019-01-01T11:00', endDate : '2019-01-01T13:00', name : 'Lunch' },
        { id : 5, resourceId : 'r3', startDate : '2019-01-01T12:00', endDate : '2019-01-01T14:00', name : 'Lunch' },
        { id : 6, resourceId : 'r4', startDate : '2019-01-01T12:00', duration : 2, durationUnit : 'h', name : 'Lunch' },
        { id : 7, resourceId : 'r2', startDate : '2019-01-01T10:00', endDate : '2019-01-01T17:00', name : 'AFK (uses timeRangeColor)', timeRangeColor : 'red' },
        { id : 8, resourceId : 'r7', startDate : '2019-01-01T12:00', endDate : '2019-01-01T18:00', name : 'Afternoon off (custom style)', style : 'background: rgba(255,165,0,.3);color : orange' },
        { id : 9, resourceId : 'r5', startDate : '2019-01-01T06:00', endDate : '2019-01-01T20:00', name : 'Parental leave (custom CSS)', cls : 'custom' }
    ];

You shouldn't need to set them up manually in the code.


Post by eugenem »

This is exactly what I did:

"resourceTimeRanges":{
"rows":[
{"startDate":"2021-07-27T00:00:00","duration":2,"name":"","timeRangeColor":"indigo","resourceId":"S_1"},
{"startDate":"2021-07-27T00:00:00","duration":2,"name":"","timeRangeColor":"indigo","resourceId":"S_2"},
{"startDate":"2021-07-27T00:00:00","duration":2,"name":"","timeRangeColor":"indigo","resourceId":"S_3"}
...

Post by saki »

In that case we need a runnable showcase to sort out the root of the problem. Post please a simple possible version that shows the scrolling issue.

FYI, I've added mode:'vertical' to our https://bryntum.com/examples/scheduler/resourcetimeranges/ and it behaves well:

Screen Shot 2021-08-02 at 10.35.25.png
Screen Shot 2021-08-02 at 10.35.25.png (556.51 KiB) Viewed 878 times

Post by eugenem »

this seems to work, but how could I color the whole column at once?


Post by mats »

Set the start / end date of the resource time ranges to match the start / end of the view.


Post Reply