Appearance
Vue 3
Calendar options also supports availability: constraints, preventEventOverlap and validateInteraction. Changes synchronize with the existing instance; removing options restores defaults.
Status: implemented Web integration in the shared npm package.
Vue exports Calendar and Timeline from @xsigns/chronosketch/vue. Pass the component configuration through :options="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 slots
Calendar supports the event slot. For typed metadata instantiate createCalendarComponent<TMetadata>() once at module scope. See event templates.
Gantt supports optional group icons through reactive options.groupIcons.
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 vue 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.