Resource Row Height
The height of the rows is determined by the maximum number of events it houses at any moment, but in some cases this needs to be overridden. The height of a resource row or track can be adjusted in CSS. Let's explore a couple of scenarios.
Demo
There might be cases when you would like to reduce the height of the parent resources.
This can be achieved only if the event creation is not allowed on parent resources.
You can prevent that by setting the eventCreation property of the
resource to false.
Add your custom height to the .mbsc-timeline-parent CSS class.
.mbsc-timeline-parent {
height: 32px;
}
You can also play with the size of the resource rows in general.
Override the .mbsc-timeline-row CSS class to increase the height of the rows for a bigger resource content.
This will be applicable for parent resources as well.
.mbsc-timeline-row {
height: 78px;
}
This extra space is there to let pointer and touch users create new events if there already is an existing event for that time.
In case you don't allow multiple events at the same time, you can adjust the bottom spacing through the .mbsc-timeline-row-gutter CSS class.
.mbsc-timeline-row-gutter {
height: 6px;
}
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
$(function () {
$('#demo-timeline-row-height')
.mobiscroll()
.eventcalendar({
view: {
timeline: {
type: 'month',
},
},
clickToCreate: true,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
data: [
{
start: '2026-10-02T00:00',
end: '2026-10-05T00:00',
title: 'Event 1',
resource: 'res1',
},
{
start: '2026-10-09T00:00',
end: '2026-10-15T00:00',
title: 'Event 2',
resource: 'res1',
},
{
start: '2026-10-05T00:00',
end: '2026-10-09T00:00',
title: 'Event 3',
resource: 'res2',
},
{
start: '2026-10-08T00:00',
end: '2026-10-13T00:00',
title: 'Event 4',
resource: 'res3',
},
{
start: '2026-10-07T00:00',
end: '2026-10-12T00:00',
title: 'Event 5',
resource: 'res3',
},
{
start: '2026-10-03T00:00',
end: '2026-10-10T00:00',
title: 'Event 6',
resource: 'res4',
},
{
start: '2026-10-15T00:00',
end: '2026-10-23T00:00',
title: 'Event 7',
resource: 'res4',
},
{
start: '2026-10-12T00:00',
end: '2026-10-17T00:00',
title: 'Event 8',
resource: 'res5',
},
{
start: '2026-10-08T00:00',
end: '2026-10-13T00:00',
title: 'Event 9',
resource: 'res6',
},
{
start: '2026-10-20T00:00',
end: '2026-10-27T00:00',
title: 'Event 10',
resource: 'res7',
},
{
start: '2026-10-06T00:00',
end: '2026-10-12T00:00',
title: 'Event 11',
resource: 'res8',
},
{
start: '2026-10-18T00:00',
end: '2026-10-25T00:00',
title: 'Event 12',
resource: 'res8',
},
],
resources: [
{
id: 'gro1',
name: 'Team 1',
color: '#ff1717',
eventCreation: false,
children: [
{
id: 'res1',
name: 'Ryan',
color: '#1dab2f',
title: 'Cloud System Engineer',
img: 'https://img.mobiscroll.com/demos/m1.png',
},
{
id: 'res2',
name: 'Kate',
color: '#e20000',
title: 'Help Desk Specialist',
img: 'https://img.mobiscroll.com/demos/f1.png',
},
{
id: 'res3',
name: 'John',
color: '#4981d6',
title: 'Application Developer',
img: 'https://img.mobiscroll.com/demos/m2.png',
},
],
},
{
id: 'gro2',
name: 'Team 2',
eventCreation: false,
children: [
{
id: 'res4',
name: 'Mark',
color: '#f7961e',
title: 'Data Quality Manager',
img: 'https://img.mobiscroll.com/demos/m3.png',
},
{
id: 'res5',
name: 'Sharon',
color: '#34c8e0',
title: 'Network Administrator',
img: 'https://img.mobiscroll.com/demos/f2.png',
},
],
},
{
id: 'gro3',
name: 'Team 3',
color: '#af0000',
eventCreation: false,
children: [
{
id: 'res6',
name: 'Emma',
color: '#843100',
title: 'Client Services Manager',
img: 'https://img.mobiscroll.com/demos/f3.png',
},
{
id: 'res7',
name: 'Ashley',
color: '#4caf00',
title: 'Instructional Designer',
img: 'https://img.mobiscroll.com/demos/f4.png',
},
{
id: 'res8',
name: 'Derek',
color: '#7056ff',
title: 'Architectural Engineer',
img: 'https://img.mobiscroll.com/demos/m4.png',
},
],
},
],
renderResource: function (resource) {
if (resource.children) {
return '<div>' + resource.name + '</div>';
} else {
return (
'<div class="md-timeline-row-height-cont">' +
'<div class="md-timeline-row-height-name">' +
resource.name +
'</div>' +
'<div class="md-timeline-row-height-title">' +
resource.title +
'</div>' +
'<img class="md-timeline-row-height-avatar" src="' +
resource.img +
'"/>' +
'</div>'
);
}
},
});
});
<div id="demo-timeline-row-height" class="md-timeline-row-height"></div>
.md-timeline-row-height .mbsc-timeline-row {
height: 78px;
}
.md-timeline-row-height .mbsc-timeline-parent {
height: 32px;
}
.md-timeline-row-height .mbsc-timeline-row-gutter {
height: 6px;
}
.md-timeline-row-height-cont {
position: relative;
padding-left: 50px;
}
.md-timeline-row-height-avatar {
position: absolute;
max-height: 50px;
max-width: 50px;
top: 30px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 10px;
}
.md-timeline-row-height-name {
font-size: 16px;
}
.md-timeline-row-height-title {
font-size: 13px;
margin-top: 5px;
}