Load Resources on Demand
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: mobiscroll.localeEn Selecting the locale loads the localized settings and the translated UI text.
Load Resources on Demand
The resources can be populated on initialization or in case of a bigger hierarchy, the more efficient way is to load the child resources and their events on demand.
Getting the resources and the events in real time as the user navigates improves load performance.
Use the onResourceExpand lifecycle event to load the data runtime. You can learn about lifecycle events and places where to drop logic to customize the experience.
Demo
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
var myResources = [
{
id: 1,
name: 'Group 1',
collapsed: true,
eventCreation: false,
children: [
{
id: 11,
color: '#e20000',
name: 'Resource 1',
},
{
id: 12,
color: '#76e083',
name: 'Resource 2',
},
{
id: 13,
color: '#4981d6',
name: 'Resource 3',
},
],
},
{
id: 2,
name: 'Group 2',
collapsed: true,
eventCreation: false,
children: [
{
id: 21,
name: 'Loading...',
},
],
},
{
id: 3,
name: 'Group 3',
collapsed: true,
eventCreation: false,
children: [
{
id: 31,
name: 'Loading...',
},
],
},
{
id: 4,
name: 'Group 4',
collapsed: true,
eventCreation: false,
children: [
{
id: 41,
name: 'Loading...',
},
],
},
{
id: 5,
name: 'Group 5',
collapsed: true,
eventCreation: false,
children: [
{
id: 51,
color: '#af0000',
name: 'Resource 12',
},
{
id: 52,
color: '#446f1c',
name: 'Resource 13',
},
{
id: 53,
color: '#1dab2f',
name: 'Resource 14',
},
],
},
{
id: 6,
name: 'Resource 17',
color: '#167593',
},
{
id: 7,
name: 'Resource 18',
color: '#93166c',
},
{
id: 8,
name: 'Resource 19',
color: '#e5e923',
},
{
id: 9,
name: 'Resource 20',
color: '#935028',
},
];
var myEvents = [
{
start: '2026-10-25T10:00',
end: '2026-10-25T13:00',
title: 'Event 14',
resource: 6,
},
{
start: '2026-10-25T15:00',
end: '2026-10-25T17:30',
title: 'Event 15',
resource: 7,
},
{
start: '2026-10-25T09:00',
end: '2026-10-25T11:00',
title: 'Event 16',
resource: 8,
},
{
start: '2026-10-25T17:00',
end: '2026-10-25T20:00',
title: 'Event 17',
resource: 9,
},
];
function loadChildResources(args) {
var newResources = myResources.slice();
var resource = args.resourceObj;
if (!resource.loaded) {
var newEvents = myEvents.slice();
$.getJSON('https://trial.mobiscroll.com/load-resources/?res=' + args.resource + '&callback=?', function (data) {
newEvents = $.merge(newEvents, data.events);
myEvents = newEvents;
resource.children = data.resources;
resource.loaded = true;
myCalendar.setOptions({
data: newEvents,
resources: newResources,
});
mobiscroll.toast({
message: 'Resources loaded',
});
});
}
}
var myCalendar = $('#demo')
.mobiscroll()
.eventcalendar({
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
view: {
timeline: {
type: 'day',
},
},
resources: myResources,
data: myEvents,
onResourceExpand: function (args) {
loadChildResources(args);
},
})
.mobiscroll('getInst');
});
<div id="demo" class="md-load-resources-on-demand"></div>
.md-load-resources-on-demand .mbsc-timeline-parent {
height: 34px;
}