--- title: "Javascript Scheduler Multi-Resource Configuration Example | Mobiscroll" component: "Scheduler" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/scheduler/resource-data-structure" --- # Multi-Resource Configuration - JavaScript Scheduler demo Configure multiple resources in a Javascript Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap. Plain JS api for usage everywhere. - [Live demo](https://demo.mobiscroll.com/javascript/scheduler/resource-data-structure) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/resource-data-structure) - This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/resource-data-structure.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/resource-data-structure.md), [React](https://demo.mobiscroll.com/react/scheduler/resource-data-structure.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/resource-data-structure.md) ## Description 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`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-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`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-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`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragInTime) option of the calendar. - `eventResize` - Specifies whether the events in the specified resource are resizable. If set to `false` has precedence over [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-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`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventOverlap) option of the calendar. ## What this demo shows - A desktop daily scheduler with date navigation, multiple resources, and a vertically scrollable time grid for the selected day. - **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between days and jump back to the current day. - **Day header** The short weekday name and the selected date are shown below the main navigation. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Resource strip** Three resources are displayed across the scheduler: `Ryan UX Designer`, `Kate Product Developer`, and `John Data Analyst`. - **Resource template** Each resource header shows the resource name in bold with the role shown below in a muted style. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected day. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Current time** A horizontal blue line marks the current time across the scheduler. - **Hover feedback** Hovering over the time grid shows a time indicator that follows the pointer in 15-minute increments. - **Timed events** Events are displayed as colored cards with a colored left stripe, the event title, and the exact start and end time. - **Event interaction** Hovering over events highlights them and shows drag and resize handles when the event allows those interactions. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Resource-based schedules** Showing separate schedules for people, rooms, equipment, or other bookable resources in the same day view. - **Team planning** Comparing each resource's assigned events side by side while keeping the time axis shared across the scheduler. - **Role-aware scheduling** Displaying extra resource details, such as job title or responsibility, directly in the resource header. - **Resource-specific behavior** Using base resource properties to control event color, creation, dragging, resizing, and overlap behavior per resource. - **Custom resource data** Extending resource objects with custom fields and rendering those fields in the scheduler header. ## Tutorial ```js 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' }] }); ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option - [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option - [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option - [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option - [`renderResource`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderResource) - renderer ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); mobiscroll.eventcalendar('#demo', { clickToCreate: true, dragToCreate: true, dragToMove: true, dragToResize: true, eventDelete: true, view: { scheduler: { type: 'day' }, }, 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: 'Network Administrator', job: 'Titus Project', }, ], data: [ { start: '2026-10-23T15:00', end: '2026-10-23T18:00', title: 'General orientation', resource: 1, }, { start: '2026-10-23T09:00', end: '2026-10-23T11:00', text: 'Stakeholder mtg.', resource: 2, }, { start: '2026-10-23T13:30', end: '2026-10-23T15:00', text: "Lunch @ Butcher's", resource: 3, }, ], renderResource: function (resource) { return '
' + resource.name + '
' + resource.title + '
'; }, }); ``` ### HTML ```html
``` ### CSS ```css .md-resource-data-structure-title { font-size: 13px; opacity: .7; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'day' } }`. - Define 3 resources. Each uses the standard base properties (`id`, `name`, `color`) plus two custom properties - `title` (job title) and `job` (project name) - demonstrating that arbitrary fields can be added to any resource object and passed through to the render layer. - Add 3 events for today assigned to the resource rows. - Implement a custom resource row renderer - `renderResource` (React/JS/jQuery), `[resourceTemplate]` (Angular), `#resource` slot (Vue) - that shows `resource.name` for all rows and `resource.title` in a smaller, dimmed style. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-javascript.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config javascript ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` npm run dev ``` On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation ## Related demos - Previous: [Dynamic Resource Widths](https://demo.mobiscroll.com/javascript/scheduler/dynamic-content-based-resource-width.md) - Adapt Javascript Scheduler resource column widths dynamically — assign per-resource CSS classes so each column fits its header content. - Next: [Hide Resources](https://demo.mobiscroll.com/javascript/scheduler/hide-non-working-resources.md) - Show only available staff in a Javascript Scheduler — hide resource columns for days when staff are off, with support for recurring.