Event Appearance & Time Buffers

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

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.

The buffers can be customized through the renderBufferBefore and renderBufferAfter options.

Want to see how custom event rendering looks on the time grid?  Check out this example →
Download and try 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 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

mobiscroll.eventcalendar('#demo-timeline-template', {
  clickToCreate:  ,
  dragToCreate:  ,
  dragToMove:  ,
  dragToResize:  ,
  eventDelete:  ,
  view: {
    timeline: {
      type: 'day',
    },
  },
  renderTimelineEvent: function (data) {
    var ev = data.original;
    var color = data.color;

    return (
      '<div class="md-timeline-template-event" style="border-color:' +
      color +
      ';background:' +
      color +
      '">' +
      '<div class="md-timeline-template-event-cont">' +
      '<span class="mbsc-icon mbsc-font-icon mbsc-icon-' +
      ev.taskType +
      '" style="background:' +
      color +
      '"></span>' +
      '<span class="md-timeline-template-time" style="color:' +
      color +
      ';">' +
      data.start +
      '</span>' +
      '<span class="md-timeline-template-title">' +
      ev.title +
      '</span></div></div>'
    );
  },
  renderBufferBefore: function (args) {
    var event = args.original;
    var color = event.color;

    return (
      '<div class="md-buffer md-before-buffer" style="background: ' +
      color +
      '">Prep' +
      '<span class="md-buffer-time">' +
      event.bufferBefore +
      ' min</span>' +
      '<div class="md-buffer-tail" style="background: ' +
      color +
      '"></div></div>'
    );
  },
  renderBufferAfter: function (args) {
    var event = args.original;
    var color = event.color;

    return (
      '<div class="md-buffer md-after-buffer" style="background: ' +
      color +
      '">Inspection' +
      '<span class="md-buffer-time">' +
      event.bufferAfter +
      ' min</span>' +
      '<div class="md-buffer-tail" style="background: ' +
      color +
      '"></div></div>'
    );
  },
  extendDefaultEvent: function () {
    return {
      taskType: 'cogs',
      bufferAfter: 60,
      bufferBefore: 30,
      color: '#239a21',
    };
  },
  data: [
    {
      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,
    },
  ],
  resources: [
    {
      id: 1,
      name: 'Ryan',
      color: '#239a21',
    },
    {
      id: 2,
      name: 'Kate',
      color: '#01adff',
    },
    {
      id: 3,
      name: 'John',
      color: '#ff0101',
    },
  ],
});

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.