# Background Events

> FullCalendar v6 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v6/background-events
>
> Latest version (v7): https://fullcalendar.io/docs/background-events.md

Events that appear as background highlights can be achieved by setting an [Event Object](https://legacy.fullcalendar.io/v6/event-object.md)'s `display` property to `"background"`:

```js
var calendar = new Calendar(calendarEl, {
  initialDate: '2014-11-10',
  initialView: 'timeGridWeek',
  events: [
    {
      start: '2014-11-10T10:00:00',
      end: '2014-11-10T16:00:00',
      display: 'background'
    }
  ]
});
```

Result:

<img src='https://legacy.fullcalendar.io/v6/background-events.png' width='500' alt='background events example' />

Background events that are **timed** will only be rendered on the time slots in TimeGrid view.


## Color

The color of background events can be manipulated by targeting the `fc-bg-event` className, one of your own custom classNames provided by the [Event Object](https://legacy.fullcalendar.io/v6/event-object.md)'s `className` property, or by explicitly specifying a color with each [Event Object](https://legacy.fullcalendar.io/v6/event-object.md)'s or [Event Source](https://legacy.fullcalendar.io/v6/event-source-object.md)'s `color` or `backgroundColor` properties.


## Inverse Backgrounds

The spans of time *not* occupied by an event can be colored by setting the `display` property to `"inverse-background"`:

```js
var calendar = new Calendar(calendarEl, {
  initialDate: '2014-11-10',
  initialView: 'timeGridWeek',
  events: [
    {
      groupId: 'testGroupId',
      start: '2014-11-10T10:00:00',
      end: '2014-11-10T16:00:00',
      display: 'inverse-background'
    }
  ]
});
```

Result:

<img src='https://legacy.fullcalendar.io/v6/background-events-inverse.png' width='500' alt='inverse background example' />

Events that share the same `groupId` will be grouped together when this rendering happens.

## Modifying Events

The [editable](https://legacy.fullcalendar.io/v6/editable.md) property of a calendar determines whether the events on it can be modified. However, Background Events are not editable. They can not be *dragged* or *resized*.

## Demos

- [Background Events](https://legacy.fullcalendar.io/v6/background-events-demo)