# eventRender

> FullCalendar v4 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v4/eventRender
>
> Latest version (v7): https://fullcalendar.io/docs/event-render-hooks.md

Triggered while an event is being rendered. A hook for modifying its DOM.

<div class='spec' markdown='1'>
function( *info* ) { }
</div>

`info` is a plain object that contains the following properties:

<table>

<tr>
<th>event</th>
<td markdown='1'>
The associated [Event Object](https://legacy.fullcalendar.io/v4/event-object.md).
</td>
</tr>

<tr>
<th>el</th>
<td markdown='1'>
The HTML element that is being rendered. It has already been populated with the correct time/title text.
</td>
</tr>

<tr>
<th>isMirror</th>
<td markdown='1'>
`true` if the element being rendered is a "mirror" from a user drag, resize, or selection (see [selectMirror](https://legacy.fullcalendar.io/v4/selectMirror.md)). `false` otherwise.
</td>
</tr>

<tr>
<th>isStart</th>
<td markdown='1'>
`true` if the element being rendered is the starting slice of the event's range. `false` otherwise.
</td>
</tr>

<tr>
<th>isEnd</th>
<td markdown='1'>
`true` if the element being rendered is the ending slice of the event's range. `false` otherwise.
</td>
</tr>

<tr>
<th>view</th>
<td markdown='1'>
The current [View Object](https://legacy.fullcalendar.io/v4/view-object.md).
</td>
</tr>

</table>

The `eventRender` callback function can modify `element`. For example, it can change its appearance via Element's [style object](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style).

The function can also return a brand new element that will be used for rendering instead. For all-day [background events](https://legacy.fullcalendar.io/v4/background-events.md), you must be sure to return a `<td>`.

The function can also return `false` to completely cancel the rendering of the event.

`eventRender` is a great way to attach effects to event elements, such as a [Tooltip.js](https://popper.js.org/tooltip-examples.html) tooltip effect:

```js
var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'My Event',
      start: '2010-01-01',
      description: 'This is a cool event'
    }
    // more events here
  ],
  eventRender: function(info) {
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body'
    });
  }
});
```

Note that `description` is a non-standard [Event Object](https://legacy.fullcalendar.io/v4/event-object.md) field, which is allowed.

[See a live demo with Tooltip.js &raquo;](https://legacy.fullcalendar.io/v4/event-tooltip-demo)

A single event can also have multiple elements. This can be seen in the case of a `timeGridWeek` event spanning multiple columns, where each event “segment” (individual span of time after slicing) is rendered with individual elements. DOM manipulation is allowed on each element in the event instead of just the first element.

A single registered callback will be triggered for each segment of the event. In other words, an event spanning two columns will trigger two callbacks, with three columns triggering three callbacks, and so forth.