JQuery Scheduler Multi-Resource View Example

The scheduler can handle multiple resources inside a single instance. Pass the resource list to the resources option with an id, name, color and eventCreation.

id - This is an id that can be referenced in the event data
name - The name of the resource that will be printed at the top of the respective column
color - The color controls the default event color of the resource. Event colors can be specific above this. If the color is omitted the underlying events will inherit the default calendar color
eventCreation - This controls if events can be created or dropped onto this resource

The resources in which the resources appear follows the order of the array passed to the component.

Events can be shared between resources and it is possible to move events between resources. The move is handled automatically however you can block it if moving an event from one resource to the other is prohibited. Learn about lifecycle event hooks.

Download and try example

Preview in full screen

Show multiple resources — people, rooms, or equipment — side by side in a Scheduler weekly view.

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

$(function () {
  var now = new Date();
  var day = now.getDay();
  var monday = now.getDate() - day + (day == 0 ? -6 : 1);

  $('#demo-resource-view')
    .mobiscroll()
    .eventcalendar({
      clickToCreate:  ,
      dragToCreate:  ,
      dragToMove:  ,
      dragToResize:  ,
      eventDelete:  ,
      view: {
        scheduler: {
          type: 'week',
          allDay: false,
          startDay: 1,
          endDay: 5,
          startTime: '05:00',
          endTime: '22:00',
        },
      },
      data: [
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 1, 11),
          end: new Date(now.getFullYear(), now.getMonth(), monday + 1, 12, 30),
          title: 'Product team mtg.',
          resource: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 3, 15),
          end: new Date(now.getFullYear(), now.getMonth(), monday + 3, 17),
          title: 'Decision Making mtg.',
          resource: 1,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 2, 12),
          end: new Date(now.getFullYear(), now.getMonth(), monday + 2, 15, 30),
          title: 'Shaping the Future',
          resource: 2,
          editable: false,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 3, 9),
          end: new Date(now.getFullYear(), now.getMonth(), monday + 3, 12),
          title: 'Innovation mtg.',
          resource: 3,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 3, 11),
          end: new Date(now.getFullYear(), now.getMonth(), monday + 3, 16),
          title: 'Decision Making mtg.',
          resource: 4,
        },
        {
          start: new Date(now.getFullYear(), now.getMonth(), monday + 3, 11),
          end: new Date(now.getFullYear(), now.getMonth(), monday + 3, 13),
          title: 'Stakeholder mtg.',
          resource: 5,
        },
      ],
      colors: [
        {
          start: '05:00',
          end: '22:00',
          recurring: {
            repeat: 'daily',
          },
          resource: 2,
          background: '#d3b9711a',
        },
      ],
      resources: [
        {
          id: 1,
          name: 'Flatiron Room',
          color: '#f7c4b4',
        },
        {
          id: 2,
          name: 'The Capital City (locked)',
          color: '#c6f1c9',
          eventCreation: false,
        },
        {
          id: 3,
          name: 'Heroes Square',
          color: '#e8d0ef',
        },
        {
          id: 4,
          name: 'Thunderdome',
          color: '#edeaba',
        },
        {
          id: 5,
          name: 'King’s Landing',
          color: '#bacded',
        },
      ],
    });
});

<div id="demo-resource-view"></div>

Multi-Resource View

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session