Events are not rendered if they are outside of scheduler timespan even after timespan in expanded

Summary: Render a scheduler pro component with 2 events that are within the set timespan. Load data containing a 3rd event that is outside the currect timespan, use ".setTimeSpan" to expand the current timespan to contain all events within the new dataset and only the original 2 events are visible, the 3rd event is not rendered.
Component: Scheduler Pro 4.1.4
Steps to reproduce: Hit the "Load Data" button
Example
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" href="./schedulerpro-4.1.4/build/schedulerpro.material.css" id="bryntum-theme" />
        <script type="text/javascript" src="./schedulerpro-4.1.4/build/schedulerpro.umd.js"></script>
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body id="rootContainer">
        <script type="text/javascript">
            const resources = [
                    {
                        "id":"userID1"
                        ,"name":"Test User"
                    }
                ]
                , events = [
                    {
                        "id": "eventRecord1",
                        "name": "Task #1",
                        "startDate": new Date( 2021, 2, 3, 9, 0, 0 ),
                        "endDate": new Date( 2021, 2, 3, 18, 0, 0 )
                    }, {
                        "id": "eventRecord2",
                        "name": "Task #2",
                        "startDate": new Date( 2021, 2, 3, 9, 0, 0 ),
                        "endDate": new Date( 2021, 2, 3, 18, 0, 0 )
                    }
                ]
                , assignments = [
                    {
                        "id": 2,
                        "eventId": "eventRecord1",
                        "resourceId": "userID1",
                        "event": "eventRecord1",
                        "resource": "userID1"
                    }, {
                        "id": 3,
                        "eventId": "eventRecord2",
                        "resourceId": "userID1",
                        "event": "eventRecord2",
                        "resource": "userID1"
                    }
                ];

            const scheduler = new bryntum.schedulerpro.SchedulerPro({
                appendTo         : 'rootContainer'

                , project: {
                    eventStore: new bryntum.schedulerpro.EventStore({
                        data: events
                    })

                    , resourceStore: new bryntum.schedulerpro.ResourceStore({
                        data: resources
                    })

                    , assignmentStore: new bryntum.schedulerpro.AssignmentStore({
                        data: assignments
                    })

                    , calendarManagerStore: new bryntum.schedulerpro.CalendarManagerStore({
                        data: [{
                            id: "workhours"
                            , name: "Working hours"
                            , unspecifiedTimeIsWorking: false
                            , intervals: [
                                {
                                    recurrentStartDate: "at 9:00"
                                    , recurrentEndDate: "at 13:00"
                                    , isWorking: true
                                },{
                                    recurrentStartDate: "at 14:00"
                                    , recurrentEndDate: "at 18:00"
                                    , isWorking: true
                                }
                            ]
                        }]
                    })
                    , calendar: "workhours"
                }

                , columns : [
                    { text: 'Employee', field: 'name' }
                    , { text: 'Email', field: 'email' }
                ]

                , createEventOnDblClick: false
                , startDate: new Date( 2021, 2, 3 )
                , endDate: new Date( 2021, 2, 4 )

                , features : {
                    taskEdit: false
                    , eventResize: false
                    , dependencies: false

                    , pan: true
                    , eventDragCreate: false
                }

                //set calendar columns visualisation 
                , viewPreset: {
                    base: 'hourAndDay'
                    , tickWidth: 30
                    , displayDateFormat: 'll HH:mm'
                    , headers: [
                        {
                            unit: 'day'
                            , dateFormat: 'ddd DD/MM' //Mon 01/10
                        },{
                            unit: 'hour'
                            , dateFormat: 'HH'
                        }
                    ]
                }

                , tbar: [
                    { 
                        text : 'Load Data'
                        , onClick: async () => {
                            await loadData();
                            _onEventStoreLoad();
                        }
                    }
                ]
            });

            async function loadData(){
                scheduler.eventStore.loadDataAsync([{
                        "id": "eventRecord1",
                        "name": "Task #1_1",
                        "startDate": new Date( 2021, 2, 3, 9, 0, 0 ),
                        "endDate": new Date( 2021, 2, 3, 18, 0, 0 )
                    }, {
                        "id": "eventRecord2",
                        "name": "Task #2_2",
                        "startDate": new Date( 2021, 2, 3, 9, 0, 0 ),
                        "endDate": new Date( 2021, 2, 3, 18, 0, 0 )
                    }, {
                        "id": "eventRecord3",
                        "name": "Task #2_3",
                        "startDate": new Date( 2021, 2, 4, 9, 0, 0 ),
                        "endDate": new Date( 2021, 2, 4, 18, 0, 0 )
                    }]);
            };

            const _onEventStoreLoad = function(){
                let eventStore = scheduler.eventStore
                    , startDate = null
                    , endDate = null;

                for( let index = 0, count = eventStore.getCount(); index < count; index++ ){
                    let eventObj = eventStore.getAt( index );
                    if( startDate === null || startDate > eventObj.startDate ){
                        startDate = eventObj.startDate;
                    }

                    if( endDate === null || endDate < eventObj.endDate ){
                        endDate = eventObj.endDate;
                    }
                }

                if( startDate && endDate === null ){
                    endDate = startDate;
                }
                else if( endDate && startDate === null ){
                    startDate = endDate;
                }

                let schedulerStart = new Date( startDate );
                schedulerStart.setHours( schedulerStart.getHours() - 2 );

                let schedulerEnd = new Date( endDate );
                schedulerEnd.setHours( schedulerEnd.getHours() + 2 );

                scheduler.setTimeSpan( schedulerStart, schedulerEnd );
            };
        </script>
    </body>
</html>
bryntum / support

Events are not rendered if they are outside of scheduler timespan even after timespan in expanded #2957
