Event Render Hooks

Customize the rendering of event elements with the following options:

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(arg), the arg 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

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