---
title: "Javascript Scheduler Resource Headers Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/custom-resource-header-template"
---

# Resource Headers - JavaScript Scheduler demo

Build a Javascript resource scheduler where each column shows a custom header — add avatar, name, and job title to identify resources at a glance. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/custom-resource-header-template)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/custom-resource-header-template)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/custom-resource-header-template.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/custom-resource-header-template.md), [React](https://demo.mobiscroll.com/react/scheduler/custom-resource-header-template.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/custom-resource-header-template.md)

## Description

Use the [`renderResource`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderResource) option for rendering a custom resource header. Customize how the resource headers look and what they show. Utilize properties passed in the [`resources` array](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources).

**Interested in displaying resource information on hover?** [Show details on hover →](https://demo.mobiscroll.com/javascript/timeline/display-resource-information-on-hover)

## What this demo shows

- A desktop weekly scheduler from Monday to Friday, with a fixed resource and week strip, and a vertically scrollable time grid running from 5 AM to 10 PM.
- **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 weeks and jump back to the current day.
- **Custom resource headers** Each resource header displays an avatar, the resource name, and the resource description or job title.
- **Resource grouping** The selected week is repeated under each resource, so every resource has its own week view in the scheduler grid.
- **Time grid** The scheduler shows 17-hours range from 5 AM to 10 PM and can be scrolled vertically.
- **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.
- **Multi-resource events** Events assigned to more than one resource appear in each involved resource column for the same day.
- **Synchronized multi-resource updates** Dragging or resizing a multi-resource event updates the corresponding event instance for the other assigned resources.
- **Repeated event examples** The demo includes multi-resource events such as Impact Training for Kate and John on Monday and Tuesday, General orientation for Ryan, Kate, and John on Thursday, and Product team mtg. for Kate and John on Friday.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **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

- **Team scheduling by person** Displaying several people side by side in a weekly scheduler, with each person represented by a custom resource header.
- **Role-aware resource planning** Showing names, avatars, and job titles directly in the resource header so users can identify who they are scheduling.
- **Workweek planning** Managing weekday schedules where the relevant working range is limited to business hours or extended working hours.
- **Shared meetings and training sessions** Representing events that involve multiple people while keeping the event visible under each assigned resource.
- **Drag-and-drop schedule editing** Supporting scheduler workflows where users need to move events, resize durations, and keep multi-resource assignments synchronized.

## 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
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`renderResource`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderResource) - renderer

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.eventcalendar('#demo-custom-resource-header-template', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    scheduler: {
      type: 'week',
      allDay: false,
      startDay: 1,
      endDay: 5,
      startTime: '05:00',
      endTime: '22:00',
    },
  },
  data: [
    {
      start: '2026-10-18T10:00',
      end: '2026-10-18T15:00',
      title: 'Impact Training',
      resource: [2, 3],
      color: '#35bb5a',
    },
    {
      start: '2026-10-19T10:00',
      end: '2026-10-19T15:00',
      title: 'Impact Training',
      resource: [2, 3],
      color: '#35bb5a',
    },
    {
      start: '2026-10-21T08:30',
      end: '2026-10-21T10:00',
      title: 'Quick mtg. with Martin',
      resource: 3,
      color: '#913aa7',
    },
    {
      start: '2026-10-21T12:00',
      end: '2026-10-21T13:00',
      title: 'General orientation',
      resource: [1, 2, 3],
      color: '#a71111',
    },
    {
      start: '2026-10-22T10:00',
      end: '2026-10-22T11:00',
      title: 'Product team mtg.',
      resource: [2, 3],
      color: '#6e7f29',
    },
    {
      start: '2026-10-23T14:00',
      end: '2026-10-23T16:00',
      title: 'Stakeholder mtg.',
      resource: 1,
      color: '#dcd234',
    },
    {
      start: '2026-10-24T10:00',
      end: '2026-10-24T14:00',
      title: 'Innovation mtg.',
      resource: [1, 2],
      color: '#de3d83',
    },
  ],
  resources: [
    {
      id: 1,
      name: 'Ryan',
      color: '#f7c4b4',
      description: 'Sales representative',
      img: 'https://img.mobiscroll.com/demos/m1.png',
    },
    {
      id: 2,
      name: 'Kate',
      color: '#c6f1c9',
      description: 'Web developer',
      img: 'https://img.mobiscroll.com/demos/f3.png',
    },
    {
      id: 3,
      name: 'John',
      color: '#e8d0ef',
      description: 'Territory sales manager',
      img: 'https://img.mobiscroll.com/demos/m2.png',
    },
  ],
  renderResource: function (resource) {
    return (
      '<div class="resource-template-content">' +
      '<div class="resource-name">' +
      resource.name +
      '</div>' +
      '<div class="resource-description">' +
      resource.description +
      '</div>' +
      '<img class="resource-avatar" src="' +
      resource.img +
      '"/>' +
      '</div>'
    );
  },
});
```

### HTML

```html
<div id="demo-custom-resource-header-template"></div>
```

### CSS

```css
.resource-template-content {
    position: relative;
    padding-left: 80px;
    text-align: left;
}

.resource-avatar {
    position: absolute;
    max-height: 50px;
    max-width: 50px;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 40px;
}

.resource-name {
    font-size: 20px;
}
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '05:00', endTime: '22:00' } }` - Mon-Fri, 5am-10pm, no all-day row.
- Define 3 resources, each with `id`, `name`, `color`, `description` (job title), and `img` (avatar URL): Ryan (Sales representative), Kate (Web developer), John (Territory sales manager).
- Define 7 inline events with relative dates, each carrying `title`, `start`, `end`, `resource` (single id or array of ids), and `color`.
- Pass a custom resource renderer to `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot). Render the resource's name, description, and avatar image.

## 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: [Custom Date Header](https://demo.mobiscroll.com/javascript/scheduler/date-header-template.md) - Customize the date headers of the Javascript Scheduler — add custom layouts, labels, and milestone badges to day columns.
- Next: [Cell Content Template](https://demo.mobiscroll.com/javascript/scheduler/cell-content-template.md) - Add custom content to Javascript Scheduler cells — show icons, badges, colored backgrounds, or status markers based on date, resource, and event data.