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
<script setup>
// event example
const myData = [{
bufferBefore: 30,
bufferAfter: 120,
start: '2026-10-22T16:00',
end: '2026-10-22T20:00',
title: 'Friends binge marathon',
resource: 4,
},{
bufferAfter: 30,
start: '2026-10-22T06:00',
end: '2026-10-22T08:00',
title: 'Morning routine',
resource: 1,
},{
bufferBefore: 45,
start: '2026-10-22T09:30',
end: '2026-10-22T12:00',
title: 'Product team mtg.',
resource: 4,
}];
</script>
<template>
<MbscEventcalendar
:view="{timeline: {type: 'day'}}"
:showEventBuffer="true "
:data="myData"
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents = [
{
bufferAfter: 30,
start: '2026-10-22T06:00',
end: '2026-10-22T08:00',
title: 'Morning routine',
resource: 1
},
{
bufferAfter: 120,
bufferBefore: 30,
start: '2026-10-22T16:00',
end: '2026-10-22T20:00',
title: 'Friends binge marathon',
resource: 4
},
{
bufferAfter: 120,
bufferBefore: 30,
start: '2026-10-22T13:00',
end: '2026-10-22T21:00',
title: 'Mastering CSS class',
resource: 2
},
{
bufferAfter: 10,
bufferBefore: 15,
start: '2026-10-22T08:00',
end: '2026-10-22T10:00',
title: 'Product team mtg.',
resource: 2
},
{
bufferAfter: 20,
bufferBefore: 30,
start: '2026-10-22T16:30',
end: '2026-10-22T19:30',
title: 'Cinema afternoon',
resource: 3
},
{
bufferAfter: 10,
bufferBefore: 10,
start: '2026-10-22T08:30',
end: '2026-10-22T10:00',
title: 'Quick mtg. with Martin',
resource: 3
},
{
bufferBefore: 45,
start: '2026-10-22T09:30',
end: '2026-10-22T12:00',
title: 'Product team mtg.',
resource: 4
}
]
const 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'
}
]
const myView = {
timeline: { type: 'day' }
}
</script>
<template>
<MbscEventcalendar
:drag="drag"
:view="myView"
:data="myEvents"
:resources="myResources"
></MbscEventcalendar>
</template>
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myEvents: MbscCalendarEvent[] = [
{
bufferAfter: 30,
start: '2026-10-22T06:00',
end: '2026-10-22T08:00',
title: 'Morning routine',
resource: 1
},
{
bufferAfter: 120,
bufferBefore: 30,
start: '2026-10-22T16:00',
end: '2026-10-22T20:00',
title: 'Friends binge marathon',
resource: 4
},
{
bufferAfter: 120,
bufferBefore: 30,
start: '2026-10-22T13:00',
end: '2026-10-22T21:00',
title: 'Mastering CSS class',
resource: 2
},
{
bufferAfter: 10,
bufferBefore: 15,
start: '2026-10-22T08:00',
end: '2026-10-22T10:00',
title: 'Product team mtg.',
resource: 2
},
{
bufferAfter: 20,
bufferBefore: 30,
start: '2026-10-22T16:30',
end: '2026-10-22T19:30',
title: 'Cinema afternoon',
resource: 3
},
{
bufferAfter: 10,
bufferBefore: 10,
start: '2026-10-22T08:30',
end: '2026-10-22T10:00',
title: 'Quick mtg. with Martin',
resource: 3
},
{
bufferBefore: 45,
start: '2026-10-22T09:30',
end: '2026-10-22T12:00',
title: 'Product team mtg.',
resource: 4
}
]
const myResources: MbscResource[] = [
{
id: 1,
name: 'Resource 1',
color: '#e20000'
},
{
id: 2,
name: 'Resource 2',
color: '#76e083'
},
{
id: 3,
name: 'Resource 3',
color: '#4981d6'
},
{
id: 4,
name: 'Resource 4',
color: '#f7961e'
}
]
const myView: MbscEventcalendarView = {
timeline: { type: 'week' }
}
</script>
<template>
<MbscEventcalendar
:drag="drag"
:view="myView"
:data="myEvents"
:resources="myResources"
></MbscEventcalendar>
</template>