To achieve better performance in the Scheduler when loading a large number of resources and events, we have added virtual scrolling support load a large set of resources and events instantly as you scroll. You can dynamically load large number of resources and events in the Scheduler by setting true
to the allowVirtualScrolling
property within the 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.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref='ScheduleObj' width='100%' height='550px' :selectedDate='selectedDate' :eventSettings='eventSettings' :group='group'>
<e-views>
<e-view option='TimelineMonth' :eventTemplate='timelineEventTemplate' :allowVirtualScrolling='virtualScroll' isSelected="true"></e-view>
<e-view option="TimelineYear" orientation="Vertical" :allowVirtualScrolling="virtualScroll"></e-view>
</e-views>
<e-resources>
<e-resource field='OwnerId' title='Owner' name='Owners' :allowMultiple='allowMultiple' :dataSource='ownerData' textField='Text' idField='Id' colorField='Color'>
</e-resource>
</e-resources>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { generateResourceData, generateStaticEvents } from './datasource.js';
import { SchedulePlugin, TimelineViews, TimelineMonth, TimelineYear, Resize, DragAndDrop } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
var timelineEventTemplateVue = Vue.component('timelineTemplate', {
template: `<div class='template-wrap' style='{background: data.PrimaryColor}'>
<div class="subject" style='{background: data.SecondaryColor};'>{{data.Subject}}</div></div>`,
data() {
return {
data: {}
};
}
});
export default {
data: function () {
return {
selectedDate: new Date(2018, 4, 1),
timelineEventTemplate: function (e) {
return {
template: timelineEventTemplateVue
};
},
allowMultiple: true,
virtualScroll: true,
group: {
byGroupID: false,
resources: ['Owners']
},
ownerData: generateResourceData(1, 300, 'Resource'),
eventSettings: { dataSource: generateStaticEvents(new Date(2018, 4, 1), 300, 12) }
}
},
provide: {
schedule: [TimelineViews, TimelineMonth, TimelineYear, Resize, DragAndDrop]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
.e-schedule .e-timeline-month-view .template-wrap .subject {
padding: 10px 25px;
}
.e-schedule .e-timeline-year-view .template-wrap .subject {
padding: 1px 25px;
}
.e-schedule .e-more-event-popup .template-wrap .subject {
padding: 0px 25px;
}
.e-schedule .template-wrap {
width: 100%;
}
.e-schedule .e-timeline-month-view .e-resource-left-td {
width: 150px;
}
</style>
export function generateStaticEvents(start, resCount, overlapCount) {
let data = [];
let id = 1;
for (let i = 0; i < resCount; i++) {
let randomCollection = [];
let random = 0;
for (let 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 (let k = 1; k <= 2; k++) {
randomCollection.push(random + k);
}
let startDate = new Date(start.getFullYear(), start.getMonth(), random);
startDate = new Date(startDate.getTime() + (((random % 10) * 10) * (1000 * 60)));
let 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,
OwnerId: i + 1
});
id++;
}
}
return data;
}
export function generateResourceData(startId, endId, text) {
let data = [];
let colors = [
'#ff8787', '#9775fa', '#748ffc', '#3bc9db', '#69db7c',
'#fdd835', '#748ffc', '#9775fa', '#df5286', '#7fa900',
'#fec200', '#5978ee', '#00bdae', '#ea80fc'
];
for (let a = startId; a <= endId; a++) {
let n = Math.floor(Math.random() * colors.length);
data.push({
Id: a,
Text: text + ' ' + a,
Color: colors[n]
});
}
return data;
}
export function generateObject() {
var data = [];
for (var a = 0; a < 25; a++) {
data.push({
Id: a + 1,
Subject: 'Testing',
StartTime: new Date(2021, 3, 28),
EndTime: new Date(2021, 3, 29),
IsAllDay: true
});
}
return data;
}
For now, the virtual loading of resources and events is not supported in
MonthAgenda
,Year
andTimelineYear
(Horizontal Orientation) views.
You can refer to our Vue Scheduler feature tour page for its groundbreaking feature representations. You can also explore our Vue Scheduler example to knows how to present and manipulate data.