Vue Gantt Chart and Resource Scheduler

rows supplies the people or features down the left. items supplies scheduled work; itemRowKey connects each item to a row. For a roadmap, create one row per feature and give its item the same row id. A resource planner can have many bookings per person. Overlaps stack automatically.

Every item needs a start plus an exclusive end or positive duration. durationUnit defaults to whole calendar days; use hours or minutes for precise work. Explicit ends take precedence. Date-only strings are local midnight. Dates and ISO timestamps display in the browser’s local time. Invalid or reversed spans are omitted; rows without dates remain available for planning.

Field mappings accept logical field names or resolver functions, sharing the data grid and activity timeline conventions. The component does not fetch or mutate records. Handle row-create, time-range-select, and item-click in your application, using your own forms, store, and persistence.

Weeks shows daily cells; Months compresses days for a broader overview; Days shows individual hours. Scroll horizontally or use the previous/next controls. Zoom and visibility changes preserve the date at the left edge. The Today action and exposed scrollToDate(date) method navigate inside the supplied startDate / days window.

:working-hours="[6, 18]" describes 06:00–18:00. Other hours and configured weekendDays are muted but valid. Hide them independently, then expand them from the toolbar. Hidden time compresses the axis; it does not shorten stored durations. A Friday-to-Monday selection still spans the weekend in real time. A current-time marker is shown only when that instant is within a displayed cell.

Plan mode supports pointer dragging in either direction, with edge scrolling. Week and month zoom snap to dates; hourly views snap to selectionStep minutes. Touch keeps native scrolling; each row’s + button requests a form with a suggested span. Arrow keys, Shift + arrows, and Enter provide keyboard range selection. Escape cancels.

Enable draggableItems for horizontal movement and resizableItems for the dotted right-edge grip. Enable allowRowChange only when rows represent resources, such as people; leave it off when each row is a named feature. These options are independent of creation mode. The examples bind movement and resizing to their Plan mode toggle.

item-move and item-resize emit the original item, source and target rows, previous dates, and proposed dates. Apply the change in your own store. Pointer previews do not mutate records; Escape or a drop outside the rows cancels. A move preserves local wall-clock endpoints in week/month zoom and elapsed duration in hourly zoom. A resize keeps the start fixed, with a minimum of one visible selection step. Hidden time remains part of the interval.

The meeting-room example starts at hourly zoom with 15-minute snapping and 08:00–18:00 working days. Equipment hire shows reservations across days and weekends, with service periods occupying the same resources. Both examples reject overlapping bookings when creating, moving, resizing, or editing. These checks live in the example application; a production booking service should enforce its availability rules when saving.

On a focused item, Alt + left/right moves through time; Alt + up/down changes resource rows when enabled. On the resize grip, left/right adjusts the end. Touch users can resize with the explicit grip or tap the item to edit dates in the example form. Grips appear at the true end only, so scrolling into the middle of a long item does not expose a misleading resize handle.

Like DomWeekPlanner, a selected range is intent: no item is created until your application accepts it. The example uses DomDialog to name, edit, or cancel work. This component covers scheduling; dependency rules, automatic resource allocation, and critical-path calculations belong to the application.