rocket This release is brand new! For older releases, use the switcher ↓
edit doc

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:

unescapted text, provided as a string:

eventContent: 'some text'

html, wrapped in an object:

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

an array of DOM nodes, wrapped in an object:

eventContent: { domNodes: arrayOfDomNodes }

a function that returns any of the above formats:

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.

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. The second argument of any content-function is a virtual DOM node factory function. This is Preact’s h() function:

eventContent: function(arg, createElement) {
  var innerText

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

  return createElement('i', {}, innerText)
}

If you install preact as a dependency of your project and set up JSX, you can write it like this:

import { h } from 'preact'
import { Calendar } from '@fullcalendar/core'

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

If you are using the React connector, you’ll be able to return React JSX nodes.