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 →
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 { Eventcalendar, setOptions  } from '@mobiscroll/react';
import { useCallback, useMemo } from 'react';

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

function App() {
  const myView = useMemo(
    () => ({
      timeline: {
        type: 'day',
      },
    }),
    [],
  );

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

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

  const myScheduleEvent = useCallback((data) => {
    const ev = data.original;
    const color = data.color;

    return (
      <div className="md-timeline-template-event" style={{ borderColor: color, background: color }}>
        <div className="md-timeline-template-event-cont">
          <span className={'mbsc-icon mbsc-font-icon mbsc-icon-' + ev.taskType} style={{ background: color }}></span>
          <span className="md-timeline-template-time" style={{ color: color }}>
            {data.start}
          </span>
          <span className="md-timeline-template-title">{ev.title}</span>
        </div>
      </div>
    );
  }, []);

  const myDefaultEvent = useCallback(
    () => ({
      taskType: 'cogs',
    }),
    [],
  );

  const myBeforeBuffer = useCallback((args) => {
    const event = args.original;
    const color = event.color;

    return (
      <div className="md-buffer md-before-buffer" style={{ background: color }}>
        Prep
        <span className="md-buffer-time">{event.bufferBefore} min</span>
        <div className="md-buffer-tail" style={{ background: color }}></div>
      </div>
    );
  }, []);

  const myAfterBuffer = useCallback((args) => {
    const event = args.original;
    const color = event.color;

    return (
      <div className="md-buffer md-after-buffer" style={{ background: color }}>
        Inspection
        <span className="md-buffer-time">{event.bufferAfter} min</span>
        <div className="md-buffer-tail" style={{ background: color }}></div>
      </div>
    );
  }, []);

  return (
    <Eventcalendar
      clickToCreate={ }
      dragToCreate={ }
      dragToMove={ }
      dragToResize={ }
      eventDelete={ }
      view={myView}
      data={myEvents}
      resources={myResources}
      renderTimelineEvent={myScheduleEvent}
      renderBufferBefore={myBeforeBuffer}
      renderBufferAfter={myAfterBuffer}
      extendDefaultEvent={myDefaultEvent}
      cssClass="md-timeline-template"
    />
  );
}

export default App;

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.