---
title: "Javascript Scheduler Event Buffer Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/event-buffer"
---

# Event Buffer - JavaScript Scheduler demo

Add buffer time before or after events in the Javascript Scheduler to visualize travel time, check-in/check-out, loading, or cleanup in the schedule grid. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/event-buffer)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/event-buffer)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/event-buffer.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/event-buffer.md), [React](https://demo.mobiscroll.com/react/scheduler/event-buffer.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/event-buffer.md)

## Description

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 →](https://demo.mobiscroll.com/javascript/scheduler/customizing-events)

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. 
- **Event buffers** When event buffer display is enabled, buffer time renders before and/or after the event block to show added time around the scheduled event.
- **Eventt buffer controls** A `Displaye the event buffer display globally` label appears next to the week view left uppder sied and under that a switchable button lets users turn event buffer display on or off. By default it's enabled. 
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Travel time** Showing travel time before or after meetings, appointments, and work orders.
- **Check-in and check-out windows** Visualizing time around flights, bookings, or scheduled appointments.
- **Loading and unloading time** Planning additional time around bus, truck, delivery, or transport work.
- **Preparation and cleanup work** Displaying cleaning, inspection, maintenance, or other recurring work that happens before or after the main scheduled event.
- **Delay visibility** Making added minutes or expected delays visible directly in the scheduler grid.

## Tutorial

### Control the event buffer display globally

- [x] Turn event buffer display ON/OFF

```js
mobiscroll.eventcalendar('#calendar', {
    view: {scheduler: { type: 'week' }},
    showEventBuffer: true,
    // event example
    data: [{
        bufferBefore: 30,
        bufferAfter: 120,
        color: '#f7961e',
        start: '2026-10-20T16:00'
        end: '2026-10-20T20:00'
        title: 'Friends binge marathon',
    },{
        bufferAfter: 30,
        color: '#4981d6',
        start: '2026-10-20T06:00',
        end: '2026-10-20T08:00',
        title: 'Morning routine',
    },{
        bufferBefore: 45,
        color: '#e20000',
        start: '2026-10-20T09:30',
        end: '2026-10-20T12:00',
        title: 'Product team mtg.',
    }],
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`showEventBuffer`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-showEventBuffer) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.eventcalendar('#demo-event-buffer', {
  view: {
    scheduler: { type: 'week' },
  },
  showEventBuffer: true,
  data: [
    {
      bufferAfter: 30,
      color: '#4981d6',
      start: '2026-10-20T06:00',
      end: '2026-10-20T08:00',
      title: 'Morning routine',
    },
    {
      bufferAfter: 120,
      bufferBefore: 30,
      color: '#f7961e',
      start: '2026-10-20T16:00',
      end: '2026-10-20T20:00',
      title: 'Friends binge marathon',
    },
    {
      bufferAfter: 120,
      bufferBefore: 30,
      color: '#4981d6',
      start: '2026-10-21T13:00',
      end: '2026-10-21T21:00',
      title: 'Mastering CSS class',
    },
    {
      bufferAfter: 10,
      bufferBefore: 15,
      color: '#76e083',
      start: '2026-10-19T08:00',
      end: '2026-10-19T10:00',
      title: 'Product team mtg.',
    },
    {
      bufferAfter: 20,
      bufferBefore: 30,
      color: '#e20000',
      start: '2026-10-22T16:30',
      end: '2026-10-22T19:30',
      title: 'Cinema afternoon',
    },
    {
      bufferAfter: 10,
      bufferBefore: 10,
      color: '#76e083',
      start: '2026-10-18T08:30',
      end: '2026-10-18T10:00',
      title: 'Quick mtg. with Martin',
    },
    {
      bufferBefore: 45,
      color: '#e20000',
      start: '2026-10-20T09:30',
      end: '2026-10-20T12:00',
      title: 'Product team mtg.',
    },
  ],
});
```

### HTML

```html
<div id="demo-event-buffer"></div>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }` and set `showEventBuffer: true` on the Eventcalendar. Without this prop buffer zones are not displayed even if events carry buffer data.
- Add `bufferBefore` and/or `bufferAfter` to individual event objects (values in minutes). Both are independent - an event can have only before, only after, or both. The buffer zone renders as a distinct shaded area adjacent to the event block.
- Define events inline using today's date with time offsets so events always appear on the current week. Include a variety of buffer combinations: `bufferAfter` only, `bufferBefore` + `bufferAfter`, and small symmetric buffers on both sides.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Multi-Timezone Configuration](https://demo.mobiscroll.com/javascript/scheduler/setting-the-timezone.md) - Set separate data and display timezones in the Javascript Scheduler — let users switch visible timezones without changing event data.
- Next: [Multiple Timezone Support](https://demo.mobiscroll.com/javascript/scheduler/multiple-timezone-support.md) - Show the same events in different timezones in the Javascript Scheduler — add a header dropdown to let users switch the display timezone at runtime.