Multi-Resource Configuration

The resource data structure for the scheduler is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like title, job ...

  • 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
  • eventDragBetweenResources - Specifies whether the events in the specified resource are movable across resources. If set to false has precedence over dragBetweenResources option of the calendar.
  • eventDragInTime - Specifies whether the events in the specified resource are movable in time. If set to false has precedence over dragInTime option of the calendar.
  • eventResize - Specifies whether the events in the specified resource are resizable. If set to false has precedence over dragToResize option of the calendar.
  • eventOverlap - Specifies whether the events in the specified resource are allowed to overlap. If set to false has precedence over eventOverlap option of the calendar.
Download and try example

Demo

Javascript jQuery Angular React Vue 
mobiscroll.eventcalendar('#my-calendar', {
    resources: [{
        // base properties
        id: 1,
        name: 'Ryan',
        color: '#ca4747',
        eventCreation: true,
        // add any property you'd like
        title: 'UX Designer',
        job: 'Apollo Project'
    }, {
        // base properties
        id: 2,
        name: 'Kate',
        color: '#cc9900',
        eventCreation: true,
        // add any property you'd like
        title: 'Product Developer',
        job: 'Yorick Project'
    }, {
        // base properties
        id: 3,
        name: 'John',
        color: '#01adff',
        eventCreation: true,
        // add any property you'd like
        title: 'Data Analyst',
        job: 'Titus Project'
    }]
});
Preview in fullscreen
Configure multiple resources in a Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.