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.

Argument#

When the above hooks are specified as a function in the form function(info), the info argument has the same properties as the Event Render Hooks argument. That includes resource, the resource of the column or lane the background event renders in, in resource views. backgroundEventTitleClass receives only event, timeText, isNarrow, isShort and resource.

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.