React

Calendar props also support availability: constraints, preventEventOverlap and validateInteraction. Changes synchronize with the existing instance; removing props restores defaults.

Documentation index

Status: implemented Web integration in the shared npm package.

React exports Calendar and Timeline from @xsigns/chronosketch/react. Pass options as individual props; for example <Timeline {...options} />.

• Integration
• Calendar integration
• Gantt options and complete data example
• Shared CSS customization

Load the shared stylesheet for both components and the additional timeline stylesheet for Gantt. Models, options and callbacks are documented with each component; the adapters share behavior rather than separate scheduling logic.

Typed event renderers

Calendar<TMetadata> accepts renderEvent and CalendarOptions<TMetadata>. Portals preserve React context. See event templates.

The React integration requires matching react and react-dom versions (18.2+ or 19). Both are optional package peers so Vanilla/Vue consumers do not need React.

Gantt supports optional group icons through the reactive groupIcons prop.

Gantt time-axis zoom supports zoom (1/2/4/6/8), a built-in slider and synchronized updates. showZoom: false hides the slider while retaining the configured zoom.

Calendar eventPresentation supports image: { src, variant? }. Gantt entryPresentation returns the same optional image/icon fields; callback changes update visible entries. See the Calendar presentation and Gantt guide.

Gantt accepts range: { start, days: 1095 } as an alternative to { start, end }. Range changes require a new instance (automatic in React/Vue). See Horizontal horizon.

Task Gantt

The separate TaskGantt integration supports task-based planning. See Task Gantt integration and its consumer dialog callbacks. Load shared CSS plus @xsigns/chronosketch/task-gantt/styles.css. Data updates retain scroll/collapse; full configuration changes rebuild the view. The application owns forms, persistence and confirmed data.

TaskGantt also supports optional progress editing through editableProgress and onTaskProgressChangeRequested; the application supplies confirmed data after each request.

TaskGantt enables sibling reordering when onTaskOrderChangeRequested is provided. Confirm the proposed task array through the same data update path as other editing requests.

Resource Timeline and TaskGantt both support heightMode: 'fill' | 'content'; see the Gantt height contract. Mode changes preserve the mounted view.

Availability Picker

See the Availability Picker guide for range rules, loading, content hooks and the react integration.