Interactions
Move, resize and create events by pointer or keyboard — drag the body to reschedule, drag an edge to resize, drag empty space to create. Every gesture is touch-friendly (long-press to grab) and fully keyboard-operable, with external drag-in and double-click inline editing on top. All of it is opt-out-able per view: [editable], [inlineEdit], [snapMinutes] and [validateChange] let you dial the interaction surface down to read-only or up to a full dispatch board.
Drag, resize & create
A live, editable time-grid. Drag an event's body to move it, drag its top or bottom edge to resize, or drag on empty space to create. The host owns the data — each edit produces a new immutable events array that the grid re-renders from, so your changes persist.
<cal-time-grid
[events]="events()"
[viewDate]="viewDate"
[today]="today"
[now]="now"
[days]="3"
[dayStartMinutes]="480"
[dayEndMinutes]="1080"
[statusColors]="statusColors"
(eventChanged)="onChange($event)"
/>Keyboard
Nothing here needs a mouse. Tab to focus an event, Enter to grab it, then arrow keys nudge it through time (and, on the timeline, across resource lanes). Every step is mirrored to an ARIA live region so screen-reader users hear the new time as it changes.
Snap & validate
snapMinutes quantises every drag to a grid — set it to 15 and events snap to quarter-hours (pass null for free, sub-pixel movement). validateChange is a predicate run on the proposed change before it commits: return false and the drag snaps back, never reaching your handler. Together they keep edits both tidy and within your business rules.
<cal-time-grid
[events]="events()"
[viewDate]="viewDate"
[days]="3"
[snapMinutes]="15"
[validateChange]="noWeekends"
(eventChanged)="onChange($event)"
/>External drag-in
Drop work that lives outside the calendar — an unassigned-jobs strip, a search result, any draggable element — straight onto a timeline lane. The timeline's externalDrop output resolves the drop into the time under the pointer, the target lane's resourceId, and whatever payload you attached, so you can turn a loose item into a scheduled, assigned event in one gesture.
<!-- Drag an unassigned item from your own list onto a lane. -->
<cal-timeline-view
[events]="jobs()"
[resources]="resources"
[viewDate]="viewDate"
[statusColors]="statusColors"
(externalDrop)="onDrop($event)"
/>Inline edit
Double-click an event to edit its title in place; commit (blur or Enter) emits an EventChange with kind 'inline-edit' carrying the new title, which you fold back into your event array exactly like a move or resize. Set [inlineEdit]="false" to turn it off while keeping drag and resize.