Event Buffer Time
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
html<mbsc-eventcalendar
[view]="{ timeline: { type: 'day' }}"
[showEventBuffer]="true "
[data]="myData"
>
</mbsc-eventcalendar>
ts// event example
const myData = [{
bufferBefore: 30,
bufferAfter: 120,
start: '2026-10-24T16:00',
end: '2026-10-24T20:00',
title: 'Friends binge marathon',
resource: 4,
},{
bufferAfter: 30,
start: '2026-10-24T06:00',
end: '2026-10-24T08:00',
title: 'Morning routine',
resource: 1,
},{
bufferBefore: 45,
start: '2026-10-24T09:30',
end: '2026-10-24T12:00',
title: 'Product team mtg.',
resource: 4,
}];
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscEventcalendarView, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myEvents = [
{
bufferAfter: 30,
start: '2026-10-24T06:00',
end: '2026-10-24T08:00',
title: 'Morning routine',
resource: 1,
},
{
bufferAfter: 120,
bufferBefore: 30,
start: '2026-10-24T16:00',
end: '2026-10-24T20:00',
title: 'Friends binge marathon',
resource: 4,
},
{
bufferAfter: 120,
bufferBefore: 30,
start: '2026-10-24T13:00',
end: '2026-10-24T21:00',
title: 'Mastering CSS class',
resource: 2,
},
{
bufferAfter: 10,
bufferBefore: 15,
start: '2026-10-24T08:00',
end: '2026-10-24T10:00',
title: 'Product team mtg.',
resource: 2,
},
{
bufferAfter: 20,
bufferBefore: 30,
start: '2026-10-24T16:30',
end: '2026-10-24T19:30',
title: 'Cinema afternoon',
resource: 3,
},
{
bufferAfter: 10,
bufferBefore: 10,
start: '2026-10-24T08:30',
end: '2026-10-24T10:00',
title: 'Quick mtg. with Martin',
resource: 3,
},
{
bufferBefore: 45,
start: '2026-10-24T09:30',
end: '2026-10-24T12:00',
title: 'Product team mtg.',
resource: 4,
},
];
myResources = [
{
id: 1,
name: 'Resource A',
color: '#fdf500',
},
{
id: 2,
name: 'Resource B',
color: '#ff0101',
},
{
id: 3,
name: 'Resource C',
color: '#01adff',
},
{
id: 4,
name: 'Resource D',
color: '#239a21',
},
{
id: 5,
name: 'Resource E',
color: '#ff4600',
},
];
view: MbscEventcalendarView = {
timeline: {
type: 'day',
},
};
}
<mbsc-eventcalendar [data]="myEvents" [resources]="myResources" [view]="view" [showEventBuffer]="true"></mbsc-eventcalendar>