# Event Render Hooks

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

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

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

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

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

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

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

`eventContent` - a [Content Injection Input](content-injection.md). 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](event-object.md)
- `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.md)


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