Search results

Virtual scrolling

To achieve better performance in the Scheduler when loading a large number of resources and events, we have added virtual scrolling support in the timeline views to load a large set of resources and events instantly as you scroll. You can dynamically load large number of resources and events in timeline view of the Scheduler by setting true to the allowVirtualScrolling property within the timeline view-specific settings. The virtual loading of events is possible in Agenda view, by setting allowVirtualScrolling property to true within the agenda view specific settings.

Source
Preview
index.js
index.html
var ownerData = generateResourceData(1, 300, 'Resource');
var eventData = generateStaticEvents(new Date(2018, 4, 1), 300, 12);
var scheduleObj = new ej.schedule.Schedule({
    height: '550px',
    width: '100%',
    currentView: 'TimelineMonth',
    views: [{
        option: 'TimelineMonth',
        eventTemplate: '#timeline-event-template',
        allowVirtualScrolling: true
    }],
    group: {
        byGroupID: false,
        resources: ['Resources']
    },
    resources: [{
        field: 'ResourceId',
        title: 'Resource',
        name: 'Resources',
        allowMultiple: true,
        dataSource: ownerData,
        textField: 'Text',
        idField: 'Id',
        colorField: 'Color'
    }],
    selectedDate: new Date(2018, 4, 1),
    eventSettings: {
        dataSource: eventData
    }
});
scheduleObj.appendTo('#Schedule');

function generateStaticEvents(start, resCount, overlapCount) {
    var data = [];
    var id = 1;
    for (var i = 0; i < resCount; i++) {
        var randomCollection = [];
        var random = 0;
        for (var j = 0; j < overlapCount; j++) {
            random = Math.floor(Math.random() * (30));
            random = (random === 0) ? 1 : random;
            if (randomCollection.indexOf(random) !== -1 || randomCollection.indexOf(random + 2) !== -1 ||
                randomCollection.indexOf(random - 2) !== -1) {
                random += (Math.max.apply(null, randomCollection) + 10);
            }
            for (var k = 1; k <= 2; k++) {
                randomCollection.push(random + k);
            }
            var startDate = new Date(start.getFullYear(), start.getMonth(), random);
            startDate = new Date(startDate.getTime() + (((random % 10) * 10) * (1000 * 60)));
            var endDate = new Date(startDate.getTime() + ((1440 + 30) * (1000 * 60)));
            data.push({
                Id: id,
                Subject: 'Event #' + id,
                StartTime: startDate,
                EndTime: endDate,
                IsAllDay: (id % 10) ? false : true,
                ResourceId: i + 1
            });
            id++;
        }
    }
    return data;
}

function generateResourceData(startId, endId, text) {
    var data = [];
    var colors = [
        '#ff8787', '#9775fa', '#748ffc', '#3bc9db', '#69db7c',
        '#fdd835', '#748ffc', '#9775fa', '#df5286', '#7fa900',
        '#fec200', '#5978ee', '#00bdae', '#ea80fc'
    ];
    for (var a = startId; a <= endId; a++) {
        var n = Math.floor(Math.random() * colors.length);
        data.push({
            Id: a,
            Text: text + ' ' + a,
            Color: colors[n]
        });
    }
    return data;
}
<!DOCTYPE html><html lang="en"><head>
    <title>Schedule Typescript Component</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Schedule Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">    
    <link href="//cdn.syncfusion.com/ej2/ej2-schedule/styles/material.css" rel="stylesheet">
    
    
    <style>
        .e-schedule .template-wrap .subject {
            padding: 10px 25px;
        }
    
        .e-schedule .template-wrap {
            width: 100%;
        }
    
        .e-schedule .e-timeline-month-view .e-resource-left-td {
            width: 150px;
        }
    </style>
    <script id="timeline-event-template" type="text/x-template">
        <div class='template-wrap' style='background:${PrimaryColor}'>
            <div class="subject" style='background:${SecondaryColor};'>${Subject}</div>
        </div>
    </script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
        <div id="container">
                <div id="Schedule"></div>
        </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

For now, the virtual loading of resources and events is available only for timeline views. In the future, we plan to port the same virtual loading on all other applicable Scheduler views.

See Also