---
title: Event Render Hooks
---


Customize the rendering of foreground events (**NOT** [background events](background-events)) with the following options:

`eventClass` - a [ClassName Input](classname-input) for the outermost event element

`eventBeforeClass` - a [ClassName Input](classname-input) for the element before the "inner" wrapper

`eventAfterClass` - a [ClassName Input](classname-input) for the element after the "inner" wrapper

`eventInnerClass` - a [ClassName Input](classname-input) for the "inner" wrapper element

`eventTimeClass` - a [ClassName Input](classname-input) for the time element within "inner"

`eventTitleClass` - a [ClassName Input](classname-input) for the title element within "inner"

`eventContent` - a [Content Injection Input](content-injection). 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](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](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](block-event-render-hooks) — all rectangular color-filled events
- [Row Event Render Hooks](row-event-render-hooks) — horizontally-rendered block events (all-day, timeline)
- [Column Event Render Hooks](column-event-render-hooks) — vertically-rendered block events (TimeGrid timed events)
- [List Item Event Render Hooks](list-item-event-render-hooks) — bullet-point events in DayGrid and List view