eventRender

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

function( info ) { }

info is a plain object that contains the following properties:

event	The associated Event Object.
el	The HTML element that is being rendered. It has already been populated with the correct time/title text.
isMirror	`true` if the element being rendered is a “mirror” from a user drag, resize, or selection (see selectMirror). `false` otherwise.
isStart	`true` if the element being rendered is the starting slice of the event’s range. `false` otherwise.
isEnd	`true` if the element being rendered is the ending slice of the event’s range. `false` otherwise.
view	The current View Object.

The eventRender callback function can modify element. For example, it can change its appearance via Element’s style object.

The function can also return a brand new element that will be used for rendering instead. For all-day background events, 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 tooltip effect:

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 field, which is allowed.

See a live demo with Tooltip.js »

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.

Callbacks

Methods

eventRender