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 support custom DOM, React, Vue and Angular content in Lite since version 2026.4.895. DOM, React and Vue support is also available in Pro since version 2026.4.7086; Pro Angular templates are supported since version 2026.4.7099.

Content supplied through onBeforeEventDomAdd or a framework event template moves between the normal and floating positions. Buttons keep their handlers, inputs keep their values, and child components keep their local state during this movement. Store values that must survive a redraw or date navigation in application state.

The following examples use Lite and display a project extending into the following June. Type a working note, then scroll horizontally until the event start leaves the viewport. The same input follows the floating label. Mouse propagation is stopped only on the input so editing it does not start an event drag.

For setup, see the Angular, React or Vue Scheduler guide. The same approach applies to Pro with its corresponding package. See Event Customization for other event content options. API: floatingEvents.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "@daypilot/daypilot-lite-angular";

@Component({
  selector: "app-floating-project",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <daypilot-scheduler [config]="config">
      <ng-template daypilotTemplate="event" daypilotTemplateFor="scheduler"
                   let-event="event">
        <strong>{{ event.text() }}</strong>
        <input aria-label="Working note" placeholder="Working note"
               (mousedown)="$event.stopPropagation()"
               (click)="$event.stopPropagation()">
      </ng-template>
    </daypilot-scheduler>
  `
})
export class FloatingProjectComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2028-10-01", days: 365, scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Project team"}],
    events: [{id: 1, text: "Long project", resource: "A",
      start: "2028-10-01", end: "2029-06-01"}],
    eventHeight: 52,
    floatingEvents: true
  };
}

React

import {useState} from "react";
import {DayPilotScheduler} from "@daypilot/daypilot-lite-react";

function ProjectLabel({event}) {
  const [note, setNote] = useState("");
  return <>
    <strong>{event.text()}</strong>
    <input aria-label="Working note" placeholder="Working note"
      value={note} onChange={ev => setNote(ev.target.value)}
      onMouseDown={ev => ev.stopPropagation()} onClick={ev => ev.stopPropagation()} />
  </>;
}

export default function FloatingProject() {
  return <DayPilotScheduler
    startDate="2028-10-01" days={365} scale="Day"
    timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
    resources={[{id: "A", name: "Project team"}]}
    events={[{id: 1, text: "Long project", resource: "A",
      start: "2028-10-01", end: "2029-06-01"}]}
    eventHeight={52} floatingEvents={true}
    onBeforeEventDomAdd={args => {
      args.element = <ProjectLabel event={args.e} />;
    }}
  />;
}

Vue

<script setup>
import {DayPilotScheduler} from "@daypilot/daypilot-lite-vue";
const resources = [{id: "A", name: "Project team"}];
const events = [{id: 1, text: "Long project", resource: "A",
  start: "2028-10-01", end: "2029-06-01"}];
</script>

<template>
  <DayPilotScheduler startDate="2028-10-01" :days="365" scale="Day"
    :timeHeaders="[{groupBy: 'Month'}, {groupBy: 'Day', format: 'd'}]"
    :resources="resources" :events="events" :eventHeight="52" :floatingEvents="true">
    <template #event="{event}">
      <strong>{{ event.text() }}</strong>
      <input aria-label="Working note" placeholder="Working note"
             @mousedown.stop @click.stop>
    </template>
  </DayPilotScheduler>
</template>