---
title: Content Injection
---

Custom content can be injected into FullCalendar's DOM in various places. This content can be provided in the following formats. These examples use `eventContent` from the [event render hooks](event-render-hooks):


**unescaped text**, provided as a string:

```js
eventContent: 'some text'
```


**html**, wrapped in an object:

```js
eventContent: { html: '<i>some html</i>' }
```


**an array of DOM nodes**, wrapped in an object:

```js
eventContent: { domNodes: arrayOfDomNodes }
```


**a function** that returns any of the above formats:

```js
eventContent: function(arg) {
  let italicEl = document.createElement('i')

  if (arg.event.extendedProps.isUrgent) {
    italicEl.innerHTML = 'urgent event'
  } else {
    italicEl.innerHTML = 'normal event'
  }

  let arrayOfDomNodes = [ italicEl ]
  return { domNodes: arrayOfDomNodes }
}
```


Each hook accepts different arguments. For example, `eventContent` accepts a single object argument [with a whole bunch of properties](event-render-hooks#argument).

The above usage of `eventContent` **only applies to vanilla JS**, not any of the connectors. Follow the instructions for your connector of choice:
[React](react#content-injection), [Vue](vue#slot-templates), [Angular](angular#nested-templates)


## Virtual DOM

FullCalendar internally uses a virtual DOM to do its rendering. This is normally behind the scenes, but content injection is one place in the API that allows you to use it.

```js
import { Calendar } from 'fullcalendar'
import { createElement } from 'fullcalendar/preact' // subpath of same package

let calendar = new Calendar(calendarEl, {
  eventContent: (arg) => (
    createElement('i', null,
      arg.event.extendedProps.isUrgent ?
        'urgent event' :
        'normal event'
    )
  )
})
```

If you are using the React implementation, you'll be able to [return React JSX nodes](react#content-injection).

If you are using the Preact implementation, you'll be able to [return Preact JSX nodes](react#content-injection).