Load Resources on Demand

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

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-31T10:00',
    end: '2026-10-31T13:00',
    title: 'Event 14',
    resource: 6,
  },
  {
    start: '2026-10-31T15:00',
    end: '2026-10-31T17:30',
    title: 'Event 15',
    resource: 7,
  },
  {
    start: '2026-10-31T09:00',
    end: '2026-10-31T11:00',
    title: 'Event 16',
    resource: 8,
  },
  {
    start: '2026-10-31T17:00',
    end: '2026-10-31T20:00',
    title: 'Event 17',
    resource: 9,
  },
];

function loadChildResources(args) {
  var newResources = myResources.slice();
  var resource = args.resourceObj;

  if (!resource.loaded) {
    var newEvents = myEvents.slice();

    mobiscroll.getJson(
      'https://trial.mobiscroll.com/load-resources/?res=' + args.resource,
      function (data) {
        newEvents = newEvents.concat(data.events);

        myEvents = newEvents;
        resource.children = data.resources;
        resource.loaded = true;

        myCalendar.setOptions({
          data: newEvents,
          resources: newResources,
        });

        mobiscroll.toast({
          message: 'Resources loaded',
        });
      },
      'jsonp',
    );
  }
}

var myCalendar = mobiscroll.eventcalendar('#demo', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  view: {
    timeline: {
      type: 'day',
    },
  },
  resources: myResources,
  data: myEvents,
  onResourceExpand: function (args) {
    loadChildResources(args);
  },
});
  

<div id="demo" class="md-load-resources-on-demand"></div>
  

.md-load-resources-on-demand .mbsc-timeline-parent {
    height: 34px;
}