---
title: "JQuery Timeline Resource Header Customization Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/resource-header-template"
---
# Resource Header Customization - jQuery Timeline demo
Add custom filters, labels, or contextual UI to JQuery Timeline resource headers — useful for room booking and resource scheduling views. For jQuery or jQuery Mobile.
- [Live demo](https://demo.mobiscroll.com/jquery/timeline/resource-header-template)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/timeline/resource-header-template)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/resource-header-template.md), [Angular](https://demo.mobiscroll.com/angular/timeline/resource-header-template.md), [React](https://demo.mobiscroll.com/react/timeline/resource-header-template.md), [Vue](https://demo.mobiscroll.com/vue/timeline/resource-header-template.md)
## Description
The empty space above the resource list can be customized through the [`renderResourceHeader`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderResourceHeader) function. This a perfect place for filtering or headers in case of a resource grid and everything that helps the users in the context of the timeline.
## What this demo shows
- A desktop weekly timeline with days arranged horizontally and resources listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between weeks, and the Today button returns to the current date.
- **Week view** The strip below the header shows the selected work week from Monday to Friday, with the current date highlighted.
- **Time grid** The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** Meeting rooms are shown as separate timeline rows, with events scheduled against each room.
- **Resource columns** Each room is displayed with its seating capacity in a dedicated column.
- **Resource alignment** The custom resource columns stay aligned with the timeline during horizontal and vertical scrolling.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events appear as colored cards with a left color stripe, a bold title, and the exact start and end time.
- **Date positioning** Events are positioned by assigned resource, date, and time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.
## Best for
- **Room booking** Helps users compare meeting room attributes without opening additional dialogs or detail views.
- **Resource scheduling** Useful for applications where resource metadata affects scheduling decisions, such as facility management, equipment scheduling, healthcare, education, and workforce planning.
- **Resource grids** Provides a pattern for showing custom resource columns next to a timeline while keeping the columns aligned with scheduled events.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`renderResource`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderResource) - renderer
- [`renderResourceHeader`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderResourceHeader) - renderer
- [`setEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setEvents) - method
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
$(function () {
var calendar = $('#demo-resource-header-template')
.mobiscroll()
.eventcalendar({
clickToCreate: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
eventDelete: true,
view: {
timeline: {
type: 'week',
startDay: 1,
endDay: 5,
},
},
resources: [
{
id: 1,
name: 'Flatiron Room',
seats: 90,
color: '#fdf500',
},
{
id: 2,
name: 'The Capital City',
seats: 250,
color: '#ff0101',
},
{
id: 3,
name: 'Heroes Square',
seats: 400,
color: '#01adff',
},
{
id: 4,
name: 'Thunderdome',
seats: 1200,
color: '#239a21',
},
{
id: 5,
name: 'King’s Landing',
seats: 550,
color: '#ff4600',
},
{
id: 6,
name: 'Gathering Field',
seats: 900,
color: '#8f1ed6',
},
],
renderResource: function (resource) {
return (
''
);
},
renderResourceHeader: function () {
return (
''
);
},
})
.mobiscroll('getInst');
$.getJSON(
'https://trial.mobiscroll.com/daily-weekly-events/?callback=?',
function (events) {
calendar.setEvents(events);
},
'jsonp',
);
});
```
### HTML
```html
```
### CSS
```css
.md-resource-header-template .mbsc-timeline-resource-col {
width: 230px;
}
.md-resource-header-template .mbsc-timeline-resource-header,
.md-resource-header-template .mbsc-timeline-resource-title {
padding: 0;
}
.md-resource-header-template .mbsc-timeline-resource-title {
height: 100%;
}
.md-resource-header-template-cont {
line-height: 50px;
height: 100%;
}
.md-resource-header-template-name {
height: 100%;
display: inline-block;
padding: 0 5px;
}
.md-resource-header-template-seats {
border-left: 1px solid #ccc;
width: 90px;
height: 100%;
float: right;
padding: 0 5px;
}
.md-resource-header-template-title {
font-weight: 600;
line-height: 56px;
}
```
## Implementation notes
- Use `timeline: { type: 'week', startDay: 1, endDay: 5 }` - a Mon-Fri week view.
- Define 6 venue resources (Flatiron Room, The Capital City, Heroes Square, Thunderdome, King's Landing, Gathering Field), each with `id`, `name`, `color`, and a custom `seats` property (capacity count). Load events from `https://trial.mobiscroll.com/daily-weekly-events/` via `getJson` (Angular: `HttpClient.jsonp`).
- Use `renderResource` (Angular: `resourceTemplate`, Vue: `#resource`) to render each resource row label. The renderer receives the resource object - render `resource.name` and `resource.seats + ' seats'` as two separate elements side by side.
- Use `renderResourceHeader` (Angular: `resourceHeaderTemplate`, Vue: `#resourceHeader`) to replace the empty top-left corner above the resource sidebar. This renderer receives no arguments - it renders static column labels (`'Room'` and `'Capacity'`) that visually align with the two elements rendered by `renderResource` below.
## 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-jquery.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 jquery
```
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 jquery --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation
## Related demos
- Previous: [Employee Shift Slots](https://demo.mobiscroll.com/jquery/timeline/shift-template.md) - Build a JQuery Timeline with custom shift slot headers — replace hourly intervals with Morning and Afternoon, each with its own time range and color.
- Next: [Custom Event Tooltip](https://demo.mobiscroll.com/jquery/timeline/custom-event-tooltip.md) - Display native, custom Mobiscroll, or third-party tooltips on JQuery Timeline events — control hover behavior with event hover callbacks.