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
• el - the element. only available in eventDidMount and eventWillUnmount
• view - View Object

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:

• Block Event Render Hooks — all rectangular color-filled events
• Row Event Render Hooks — horizontally-rendered block events (all-day, timeline)
• Column Event Render Hooks — vertically-rendered block events (TimeGrid timed events)
• List Item Event Render Hooks — bullet-point events in DayGrid and List view