New look, new major release.
FullCalendar

Event Render Hooks

Customize the rendering of foreground events (NOT background events).

eventClass - a ClassName Input for the outermost event element

eventBeforeClass - a ClassName Input for the element before the “inner” wrapper

eventAfterClass - a ClassName Input for the element after the “inner” wrapper

eventInnerClass - a ClassName Input for the “inner” wrapper element

eventTimeClass - a ClassName Input for the time element within “inner”

eventTitleClass - a ClassName Input for the title element within “inner”

eventContent - a Content Injection Input. Generated content is inserted inside the inner-most wrapper of the event element. If supplied as a callback function, it is called every time the associated event data changes.

eventDidMount - called right after the element has been added to the DOM. If the event data changes, this is NOT called again.

eventWillUnmount - called right before the element will be removed from the DOM.

Argument#

When the above hooks are specified as a function in the form function(info), the info is an object with the following properties:

  • event - Event Object
  • timeText
  • isStart
  • isEnd
  • isMirror
  • isPast
  • isFuture
  • isToday
  • color
  • contrastColor
  • isInteractive
  • isNarrow
  • isShort
  • level
  • timeClass
  • titleClass
  • options - the calendar options object, useful for reading settings like eventOverlap
  • resource - in resource views, the Resource Object of the column or lane the event renders in
  • el - the element. only available in eventDidMount and eventWillUnmount
  • view - View Object

eventTimeClass and eventTitleClass (and the *EventTimeClass/*EventTitleClass variants of the targeted hooks) receive a smaller object with only event, timeText, isNarrow, isShort and resource. In TypeScript, its type is EventTextInfo.

Resource Views#

In resource views, such as Timeline and vertical resource views, info.resource is the resource whose column or lane the event renders in. An event with multiple resources renders once per resource, and each rendering receives its own info.resource:

import clsx from 'clsx'

const calendar = new Calendar(calendarEl, {
  initialView: 'resourceTimeGridDay',
  resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' },
  ],
  events: [
    { title: 'Meeting', start: '2026-10-05T10:00:00', resourceIds: ['a', 'b'] },
  ],
  eventClass: (info) => clsx(info.resource?.id === 'b' && 'overflow-room-event'),
})

While an event is being dragged, its mirror receives the resource it’s being dragged over.

Compare info.resource.id, not the object itself: the object is not guaranteed to be the same reference from one column to the next. In views without resources, info.resource is undefined. Added in v7.1.1.

CSS Variables#

Two CSS variables are set on the outermost event element, so every element inside it inherits them:

  • --fc-event-color - the event’s color, from the event’s color, its source’s color, or eventColor
  • --fc-event-contrast-color - the color for text and other elements drawn on top of the event, from contrastColor or eventContrastColor

They hold the same values as color and contrastColor above, but your styles can use them directly, without a function. This works in any of the class-name hooks, including the targeted hooks below, and in markup you generate with eventContent:

const calendar = new Calendar(calendarEl, {
  eventColor: '#378006',
  eventContrastColor: '#fff',
  blockEventClass: 'my-block-event',
  blockEventInnerClass: 'my-block-event-inner',
})
.my-block-event {
  background-color: var(--fc-event-color);
}

.my-block-event-inner {
  color: var(--fc-event-contrast-color);
}

With Tailwind, write bg-(--fc-event-color) and text-(--fc-event-contrast-color).

Targeted Hooks#

For finer-grained control by event type, use the more specific hook sets. Each of these also receives the general event* class names above: