logo

FullCalendar

These are the new v4 docs! More info

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 »