Appearance
Vanilla JavaScript
Status: implemented Web integration in the shared npm package.
Use createCalendar from @xsigns/chronosketch or createTimeline from @xsigns/chronosketch/timeline. Mount into a host and call destroy on teardown.
- Integration
- Calendar integration
- Calendar availability and runtime setters
- 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.
Gantt supports optional group icons through groupIcons and timeline.setGroupIcons().
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 vanilla 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.