Skip to content
FluxGantt

Read-only Mode

Set readOnly: true at construction to render a chart the user cannot drag:

import { createGantt } from '@fluxgantt/core';
import { withRender } from '@fluxgantt/core/render';
import { withInteraction } from '@fluxgantt/core/interaction';
 
const gantt = withInteraction(
  withRender(
    createGantt({
      readOnly: true,
      tasks: [/* … */],
      dependencies: [/* … */],
    }),
  ),
);
gantt.mount(document.getElementById('gantt')!);

What it changes

  • mount() does not wire the drag gestures. Move, resize, and create-dependency are all inert — dragging a bar does nothing. (Composing withInteraction at all is optional; in read-only mode it still wires click-select and keyboard navigation, which stay available.)
  • Link handles are not rendered. They are an interactive affordance whose recognizer isn't wired in read-only mode, so showing them would be a misleading dead control.

What it does not change

The edit hooks (task:activated, task:context-requested) still fire in a read-only chart, since opening a detail card is not editing. Decide in your handler what to offer.

readOnly governs the rendered UI's interactivity only. The full programmatic API still works — a host app can keep pushing updates into a read-only view (e.g. from a live server subscription):

const gantt = withInteraction(withRender(createGantt({ readOnly: true, tasks: [/* … */] })));
gantt.mount(el);
 
// still works — readOnly does not lock the API:
gantt.addTask({ id: toTaskId('qa'), name: 'QA', start: '2026-08-12', end: '2026-08-13', progress: 0, type: 'task' });
gantt.moveTask(toTaskId('qa'), '2026-08-13');

This makes readOnly the right choice for dashboards and shared/embedded views where the viewer should see live changes but not edit the plan by hand.