DayPilot.Gantt.floatingTimeHeaders

The floatingTimeHeaders property (boolean) keeps time header labels readable when only part of a long header cell is visible in the Gantt chart.

Declaration

DayPilot.Gantt.floatingTimeHeaders

Default Value

true

Notes

When enabled, the label follows the visible part of the header cell as the user scrolls horizontally.

Since version 2026.4.7080, floating labels also support custom DOM, React and Vue content. Interactive header controls keep their state as the label moves during scrolling. Store values that must survive view changes in application state.

Examples

JavaScript

const gantt = new DayPilot.Gantt("dp", {
  floatingTimeHeaders: false,
  // ...
});
gantt.init();

Angular

<daypilot-gantt [config]="config"></daypilot-gantt>

config: DayPilot.GanttConfig = {
  floatingTimeHeaders: false,
  // ...
};

React

<DayPilotGantt
  floatingTimeHeaders={false}
/>

Vue

<DayPilotGantt
  :floatingTimeHeaders="false"
/>

See Also

DayPilot.Gantt Class