---
title: Background Events
type: guide
layout: docs-sublanding
demos:
  - background-events-demo
---

Events that appear as background highlights can be achieved by setting an [Event Object](event-object)'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='./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

To customize color, set one of the following:

- [backgroundEventColor](backgroundEventColor) (calendar-wide)
- [Event Source](event-source-object)'s `color` property
- [Event Object](event-object)'s `color` property


## Class Names

To append class-names to a background event element, do one of the following:

- `backgroundEventClass` or other [Background Event Render Hook](background-event-render-hooks)
- [Event Source](event-source-object)'s `className` property
- [Event Object](event-object)'s `className` property


## 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='./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](editable) 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_.