# Background Events

> FullCalendar v4 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v4/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/v4/event-object.md)'s `rendering` property to `"background"`:

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

Result:

<img src='https://legacy.fullcalendar.io/v4/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. Background events that are **all-day** will only be rendered in month view or the all-day slots of TimeGrid view.


## Color

The color of background events can be manipulated by targeting the `fc-bgevent` className, one of your own custom classNames provided by the [Event Object](https://legacy.fullcalendar.io/v4/event-object.md)'s `className` property, or by explicitly specifying a color with each [Event Object](https://legacy.fullcalendar.io/v4/event-object.md)'s or [Event Source](https://legacy.fullcalendar.io/v4/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 `rendering` property to `"inverse-background"`:

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

Result:

<img src='https://legacy.fullcalendar.io/v4/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/v4/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/v4/background-events-demo)