Background Event Render Hooks

Customize the rendering of Background Events.

backgroundEventClass - a ClassName Input for the outermost event element

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

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

backgroundEventContent - 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.

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

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

CSS Variables#

As with foreground events, --fc-event-color and --fc-event-contrast-color are set on the outermost element. Here --fc-event-color comes from the event’s color, its source’s color, or backgroundEventColor. For example, to tint the background with the event’s color:

.my-bg-event {
  background-color: color-mix(in oklab, var(--fc-event-color) 20%, transparent);
}

See Event Render Hooks for more.

NOTE: The general Event Render Hooks DO NOT APPLY to background events.