resourcesTimeRanges not rendering properly with recurring rules

[taauntik]

Forum post

You can reproduce it here https://bryntum.com/products/scheduler/examples/resourcetimeranges/ with this code

import { Scheduler, DateHelper, ResourceTimeRangeModel, RecurringTimeSpan, RecurringTimeSpansMixin, ResourceTimeRangeStore, Tooltip, Toast } from '../../build/scheduler.module.js?463787';
import shared from '../_shared/shared.module.js?463787';

//region Data

const resources          = [
        { id : 'r1', name : 'Mike' },
        { id : 'r2', name : 'Linda' },
        { id : 'r3', name : 'Lisa' },
        { id : 'r4', name : 'Madison' },
        { id : 'r5', name : 'Mark' },
        { id : 'r6', name : 'Kate' },
        { id : 'r7', name : 'Dan' },
        { id : 'r8', name : 'Henrik' },
        { id : 'r9', name : 'Rob' },
        { id : 'r10', name : 'Gloria' }
    ],
    events             = [
        {
            id         : 1,
            resourceId : 'r1',
            startDate  : new Date(2019, 0, 1, 8),
            endDate    : new Date(2019, 0, 1, 11),
            name       : 'Investigation',
            iconCls    : 'b-fa b-fa-search',
            recurrenceRule: "FREQ=WEEKLY"

    }, {
        id         : 2,
        resourceId : 'r1',
        startDate  : new Date(2019, 0, 1, 13),
        endDate    : new Date(2019, 0, 1, 15),
        name       : 'Brief',
        iconCls    : 'b-fa b-fa-newspaper'
    },
    {
        id         : 3,
        resourceId : 'r2',
        startDate  : new Date(2019, 0, 1, 8),
        endDate    : new Date(2019, 0, 1, 9, 30),
        name       : 'Scrum',
        iconCls    : 'b-fa b-fa-bullhorn'
    },
    {
        id         : 4,
        resourceId : 'r3',
        startDate  : new Date(2019, 0, 1, 8),
        endDate    : new Date(2019, 0, 1, 9, 30),
        name       : 'Scrum',
        iconCls    : 'b-fa b-fa-bullhorn'
    },
    {
        id         : 5,
        resourceId : 'r4',
        startDate  : new Date(2019, 0, 1, 7),
        endDate    : new Date(2019, 0, 1, 11),
        name       : 'Meeting',
        iconCls    : 'b-fa b-fa-calendar'
    },
    {
        id         : 6,
        resourceId : 'r4',
        startDate  : new Date(2019, 0, 1, 15),
        endDate    : new Date(2019, 0, 1, 17),
        name       : 'Meeting',
        iconCls    : 'b-fa b-fa-calendar',
        eventColor : 'blue'
    },
    {
        id         : 7,
        resourceId : 'r6',
        startDate  : new Date(2019, 0, 1, 12, 30),
        endDate    : new Date(2019, 0, 1, 19),
        name       : 'Important meeting',
        iconCls    : 'b-fa b-fa-exclamation-triangle',
        eventColor : 'red'
    },
    {
        id         : 8,
        resourceId : 'r6',
        startDate  : new Date(2019, 0, 1, 9),
        endDate    : new Date(2019, 0, 1, 12),
        name       : 'Generic meeting',
        iconCls    : 'b-fa b-fa-calendar'
    },
    {
        id         : 9,
        resourceId : 'r7',
        startDate  : new Date(2019, 0, 1, 9),
        endDate    : new Date(2019, 0, 1, 11),
        name       : 'Dad\'s birthday',
        iconCls    : 'b-fa b-fa-birthday-cake',
        eventColor : 'green'
    },
    {
        id         : 10,
        resourceId : 'r9',
        startDate  : new Date(2019, 0, 1, 13),
        endDate    : new Date(2019, 0, 1, 20),
        name       : 'Golf tournament',
        iconCls    : 'b-fa b-fa-golf-ball',
        eventColor : 'green'
    }
],

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

// We want to use recurring time ranges (see first entry in resourceTimeRanges array above)
// so we make a special model extending standard ResourceTimeRangeModel
// with RecurringTimeSpan which adds recurrence support
class MyResourceTimeRange extends RecurringTimeSpan(ResourceTimeRangeModel) {};

// Define a new store extending standard ResourceTimeRangeStore
// with RecurringTimeSpansMixin mixin to add recurrence support to the store.
// This store will contain time ranges.
class MyResourceTimeRangeStore extends RecurringTimeSpansMixin(ResourceTimeRangeStore) {
    static get defaultConfig() {
        return {
            // use our new MyResourceTimeRange model
            modelClass : MyResourceTimeRange
        };
    }
};

// Instantiate store for resourceTimeRanges using our new classes
const resourceTimeRangeStore = new MyResourceTimeRangeStore({
    data : resourceTimeRanges
});

//endregion

let newRangeCount = 0;

const scheduler = new Scheduler({
    appendTo : 'container',

startDate         : new Date(2019, 0, 2, 6),
endDate           : new Date(2019, 0, 2, 20),
viewPreset        : 'hourAndDay',
rowHeight         : 90,
barMargin         : 3,
resourceMargin    : 25,
resourceImagePath : '../_shared/images/users/',

eventStyle : 'plain',
eventColor : 'blue',

columns : [
    { type : 'resourceInfo', text : 'Name', field : 'name', width : 130 }
],

features : {
    resourceTimeRanges : {
        // Enable the resource time range elements to be reachable in the DOM (to show tooltips etc.)
        enableMouseEvents : true
    }
},

resources,
events,
// the store will be used by the "resourceTimeRanges" feature
resourceTimeRangeStore,

tbar : [
    {
        type     : 'button',
        icon     : 'b-icon-add',
        text     : 'Add new range',
        onAction : () => {
            if (newRangeCount < 10) {
                scheduler.resourceTimeRangeStore.add({
                    name           : 'New time range',
                    startDate      : new Date(2019, 0, 1, 6),
                    duration       : 2,
                    durationUnit   : 'h',
                    timeRangeColor : 'green',
                    resourceId     : 'r' + (++newRangeCount)
                });
            }
        }
    },
    {
        type     : 'button',
        icon     : 'b-fa-clock',
        text     : 'Move lunch',
        onAction : () => {
            scheduler.resourceTimeRangeStore.forEach(range => {
                if (range.name === 'Lunch') {
                    range.startDate = DateHelper.add(range.startDate, 1, 'hour');
                }
            });
        }
    },
    {
        type       : 'button',
        text       : 'Enable mouse interaction',
        pressed    : true,
        toggleable : true,
        onToggle({ pressed }) {
            scheduler.features.resourceTimeRanges.enableMouseEvents = pressed;
        }
    }
],

listeners : {
    paint() {
        const scheduler = this;

        scheduler.rangeTooltip = new Tooltip({
            rootElement : document.body,
            forSelector : '.b-sch-resourcetimerange',
            getHtml     : ({ event }) => {
                const
                    rangeRecord = scheduler.resolveResourceTimeRangeRecord(event.target),
                    hours       = DateHelper.as('hour', rangeRecord.duration, rangeRecord.durationUnit);

                return `${rangeRecord.name} - ${hours} ${DateHelper.getLocalizedNameOfUnit('hour', hours !== 1)}`;
            }
        });
    },

    resourceTimeRangeClick({ resourceTimeRangeRecord }) {
        Toast.show(`You clicked ${resourceTimeRangeRecord.name}`);
    },

    destroy() {
        this.rangeTooltip.destroy();
    }
}
});

Here is how you can reproduce it

chrome_WnUV1n3jpB.mp4