Is it possible to change background per resource? Say I want to differentiate between people and stations by color...
Support Forum
For vertical mode, the way to achieve your desired UI currently is by using https://bryntum.com/docs/scheduler/#Scheduler/feature/ResourceTimeRanges
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)
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.
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"}
...
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: