Appearance
React
Calendar props also support availability: constraints, preventEventOverlap and validateInteraction. Changes synchronize with the existing instance; removing props restores defaults.
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} />.
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.
Resource Gantt supports drawing and movement through onEntryCreateRequested and onEntryEditRequested. Same-resource overlaps are blocked by default; allowOverlap: true explicitly permits them.
Time-precise Calendar and Resources (beta.18)
Both components accept constraintDisplay: 'hatched' | 'label' | 'details' or a per-constraint resolver. Availability changes use the existing Calendar contract. Concrete initial scroll targets use { time: '10:30' } in dayScrollPosition and weekScrollPosition. For explicit later jumps, retain the CalendarViewport received by onReady and call scrollToTime('10:30') from your own action. Data updates do not reapply the initial scroll target. See the scroll contract and Resources dialog integration.
Resources also supports the Timeline layout, with target rows and reusable items. See that contract for layout-specific options, confirmed updates and platform limitations.
Calendar, Gantt, TaskGantt and both Resources layouts support independent density and headerDensity settings with live synchronization; see content and header density.
Gantt cursor rows use the shared vertical resource loading contract, including measured height and independent entry loading.