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

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


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

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


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 Reply