Event Appearance & Time Buffers

Events can be customized through the timelineEventTemplate. 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 are handled through the bufferBeforeTemplate and bufferAfterTemplate 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 
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, 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 {
  view: MbscEventcalendarView = {
    timeline: {
      type: 'day',
    },
  };

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

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

  myDefaultEvent() {
    return {
      taskType: 'cogs',
      bufferAfter: 60,
      bufferBefore: 30,
    };
  }
}

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.