Event Appearance & Time Buffers

Events can be customized through the timelineEvent template. How the events look are fully up to you. Base event fields along with custom fields can be accessed when writing the event template.

The before/after buffers can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in/check out for flights.

Templating the buffers can be done through the bufferBefore and bufferAfter options.

Want to see how custom event rendering looks on the time grid?  Check out this example →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Customize event layouts on a Timeline with icons, labels, and colors — visualize before/after buffers for travel, prep, or inspection workflows.

Code

View code on GitHub 
<script setup>
import { MbscEventcalendar, setOptions  } from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myEvents = ref([
  {
    bufferBefore: 30,
    bufferAfter: 35,
    start: '2026-10-31T10:30',
    end: '2026-10-31T13:00',
    title: 'Tire change',
    color: '#7a5886',
    taskType: 'material-repeat',
    resource: 1
  },
  {
    bufferAfter: 40,
    bufferBefore: 30,
    start: '2026-10-31T07:00',
    end: '2026-10-31T10:00',
    title: 'Brake maintenance',
    color: '#9da721',
    taskType: 'cogs',
    resource: 2
  },
  {
    bufferAfter: 45,
    bufferBefore: 30,
    start: '2026-10-31T13:30',
    end: '2026-10-31T16:30',
    title: 'Fluid maintenance',
    color: '#cd6957',
    taskType: 'cogs',
    resource: 1
  },
  {
    bufferAfter: 35,
    bufferBefore: 30,
    start: '2026-10-31T11:00',
    end: '2026-10-31T14:00',
    title: 'Oil change',
    color: '#637e57',
    taskType: 'material-repeat',
    resource: 3
  },
  {
    bufferAfter: 60,
    bufferBefore: 30,
    start: '2026-10-31T08:00',
    end: '2026-10-31T12:00',
    title: 'Engine repair',
    color: '#6c5d45',
    taskType: 'material-search',
    resource: 3
  },
  {
    bufferAfter: 45,
    bufferBefore: 30,
    start: '2026-10-31T14:00',
    end: '2026-10-31T19:00',
    title: 'Car painting',
    color: '#50789d',
    taskType: 'material-format-paint',
    resource: 2
  }
])

const myResources = ref([
  {
    id: 1,
    name: 'Ryan',
    color: '#239a21'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#01adff'
  },
  {
    id: 3,
    name: 'John',
    color: '#ff0101'
  }
])

function myDefaultEvent() {
  return {
    taskType: 'cogs',
    bufferAfter: 60,
    bufferBefore: 30,
    color: '#239a21'
  }
}

const myView = {
  timeline: { type: 'day' }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :extendDefaultEvent="myDefaultEvent"
    className="md-timeline-template"
  >
    <template #timelineEvent="data">
      <div
        class="md-timeline-template-event"
        :style="{ borderColor: data.color, background: data.color }"
      >
        <div class="md-timeline-template-event-cont">
          <span
            :class="'mbsc-icon mbsc-font-icon mbsc-icon-' + data.original.taskType"
            :style="{ background: data.color }"
          ></span>
          <span class="md-timeline-template-time" :style="{ color: data.color }">{{
            data.start
          }}</span>
          <span class="md-timeline-template-title">{{ data.original.title }}</span>
        </div>
      </div>
    </template>
    <template #bufferAfter="data">
      <div class="md-buffer md-after-buffer" :style="{ background: data.original.color }">
        Inspection
        <span class="md-buffer-time">{{ data.original.bufferAfter }} min</span>
        <div class="md-buffer-tail" :style="{ background: data.original.color }"></div>
      </div>
    </template>
    <template #bufferBefore="data">
      <div class="md-buffer md-after-buffer" :style="{ background: data.original.color }">
        Prep
        <span class="md-buffer-time">{{ data.original.bufferBefore }} min</span>
        <div class="md-buffer-tail" :style="{ background: data.original.color }"></div>
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.md-timeline-template .mbsc-schedule-event.mbsc-ltr {
  height: auto !important;
}

.md-timeline-template-event {
  border: 1px solid transparent;
  margin: 2px 0;
}

.md-timeline-template-event-cont {
  background: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  height: 32px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.md-timeline-template-event-cont .mbsc-icon {
  padding: 5px;
  box-sizing: content-box;
}

.md-before-buffer,
.mbsc-timeline-event-start .md-timeline-template-event,
.mbsc-timeline-event-start .md-timeline-template-event-cont,
.mbsc-timeline-event-start .md-timeline-template-event-cont .mbsc-icon {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.md-after-buffer,
.mbsc-timeline-event-end .md-timeline-template-event,
.mbsc-timeline-event-end .md-timeline-template-event-cont,
.mbsc-timeline-event-end .md-timeline-template-event-cont .mbsc-icon {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.md-buffer {
  position: absolute;
  display: flex;
  width: 100%;
  font-size: 10px;
  top: 2px;
  bottom: 2px;
  left: 0;
  color: #fff;
  padding: 0 6px;
  line-height: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.5;
  box-sizing: border-box;
  z-index: -1;
}

.md-buffer-tail {
  position: absolute;
  width: 14px;
  height: 100%;
  top: 0;
}

.md-before-buffer .md-buffer-tail {
  left: 100%;
}

.md-after-buffer .md-buffer-tail {
  right: 100%;
}

.md-buffer-time {
  font-weight: 600;
}

.md-timeline-template-event-cont .mbsc-icon:before {
  color: #fff;
  font-size: 18px;
}

.md-timeline-template-time {
  margin: 0 10px;
}

.md-timeline-template-title {
  color: #666;
}

.md-timeline-template .mbsc-timeline-column,
.md-timeline-template .mbsc-timeline-header-column {
  min-width: 100px;
}

.md-timeline-template .mbsc-timeline-resource,
.md-timeline-template .mbsc-timeline-row {
  min-height: 100px;
}
</style>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.