Floating Events

The JavaScript Scheduler can keep an event’s label visible when the start of a long event has scrolled out of view.

The label and selected active areas follow the visible portion of the event as the user scrolls horizontally.

Floating events turned off

Floating events turned on

Configuration

• Floating events are enabled by default. You can enable/disable this behavior using the floatingEvents property.

• The themes created using the online theme designer include a style for floating events.

• Floating events work in combination with the active areas. Areas without date-based positions follow the floating label by default; areas marked nonFloating: true retain event-relative positions.

To keep labels at the start of their events, disable floating in the Scheduler configuration:

floatingEvents: false

Use scrollDelayFloats to delay label movement until scrolling pauses. The default value of 0 makes labels follow the scroll position immediately.

Custom Event Content

Floating labels also support custom DOM, React and Vue content. See Event Customization for React components and Vue templates that display event details. Custom content moves with the label as the user scrolls; no extra floating configuration is needed.