Event Buffer
Use the bufferBefore and bufferAfter to add buffer times that will be rendered before and after the event.
These areas can help you visualize delays or added minutes for tasks. Here are some examples:
- Travel time for meetings, appointments, work orders
- Check in and check out times around flights
- Loading/unloading for bus/truck
- Cleaning, inspection, maintenance work that happen on a recurring basis
Looking to customize event buffers? Check out the templating capabilities →
Demo
Control the event buffer display globally
Turn event buffer display ON/OFF
mobiscroll.eventcalendar('#calendar', {
view: {scheduler: { type: 'week' }},
showEventBuffer: true ,
// event example
data: [{
bufferBefore: 30,
bufferAfter: 120,
color: '#f7961e',
start: '2026-10-20T16:00'
end: '2026-10-20T20:00'
title: 'Friends binge marathon',
},{
bufferAfter: 30,
color: '#4981d6',
start: '2026-10-20T06:00',
end: '2026-10-20T08:00',
title: 'Morning routine',
},{
bufferBefore: 45,
color: '#e20000',
start: '2026-10-20T09:30',
end: '2026-10-20T12:00',
title: 'Product team mtg.',
}],
});
JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-event-buffer', {
view: {
scheduler: { type: 'week' },
},
showEventBuffer: true,
data: [
{
bufferAfter: 30,
color: '#4981d6',
start: '2026-10-20T06:00',
end: '2026-10-20T08:00',
title: 'Morning routine',
},
{
bufferAfter: 120,
bufferBefore: 30,
color: '#f7961e',
start: '2026-10-20T16:00',
end: '2026-10-20T20:00',
title: 'Friends binge marathon',
},
{
bufferAfter: 120,
bufferBefore: 30,
color: '#4981d6',
start: '2026-10-21T13:00',
end: '2026-10-21T21:00',
title: 'Mastering CSS class',
},
{
bufferAfter: 10,
bufferBefore: 15,
color: '#76e083',
start: '2026-10-19T08:00',
end: '2026-10-19T10:00',
title: 'Product team mtg.',
},
{
bufferAfter: 20,
bufferBefore: 30,
color: '#e20000',
start: '2026-10-22T16:30',
end: '2026-10-22T19:30',
title: 'Cinema afternoon',
},
{
bufferAfter: 10,
bufferBefore: 10,
color: '#76e083',
start: '2026-10-18T08:30',
end: '2026-10-18T10:00',
title: 'Quick mtg. with Martin',
},
{
bufferBefore: 45,
color: '#e20000',
start: '2026-10-20T09:30',
end: '2026-10-20T12:00',
title: 'Product team mtg.',
},
],
});
<div id="demo-event-buffer"></div>