Resource Headers
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: mobiscroll.localeEn Selecting the locale loads the localized settings and the translated UI text.
Resource Headers
Use the 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.
Interested in displaying resource information on hover? Show details on hover →
Demo
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-custom-resource-header-template', {
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
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>'
);
},
});
<div id="demo-custom-resource-header-template"></div>
.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;
}