Bryntum Support Forums

Posted: **Thu Jul 22, 2021 5:45 pm**

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

Posted: **Thu Jul 22, 2021 7:31 pm**

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

Posted: **Sun Jul 25, 2021 10:45 am**

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

Posted: **Sun Jul 25, 2021 9:45 pm**

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

Posted: **Tue Jul 27, 2021 5:31 pm**

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)

Posted: **Wed Jul 28, 2021 11:16 am**

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.

Posted: **Sun Aug 01, 2021 10:32 am**

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

Posted: **Mon Aug 02, 2021 10:37 am**

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 (556.51 KiB) Viewed 893 times

Posted: **Wed Nov 17, 2021 3:56 pm**

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

Posted: **Wed Nov 17, 2021 4:02 pm**

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

Bryntum Support Forums

[ANGULAR] resource background

[ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background

Re: [ANGULAR] resource background