Week View Scheduler Calendar — HTML CSS JS Snippet

One linear transform, applied forward for rendering and inverted for interaction. Forward: an event starting at hour h paints at top = (h − START) × HOUR_H, with height = dur × HOUR_H — with START = 8 and HOUR_H = 44, the 9:30 one-on-one sits at (9.5 − 8) × 44 = 66px. Inverse: a pointer at clientY converts to h = START + (clientY − columnTop − grabOffset) / HOUR_H, after which Math.round(h / 0.5) × 0.5 snaps to half-hours and a clamp to [START, END − dur] keeps the block inside the day. Fractional hours are what keep both directions one-liners: 9:30 as 9.5 means no minutes-handling anywhere except the fmt() display function, durations add without carrying, and snapping is a single rounding expression. The grabOffset subtraction is the detail that makes dragging feel right — it preserves where within the block you grabbed, so the block moves with your hand instead of jumping its top edge to the cursor.

Because scheduling needs continuous positional feedback, which is the opposite of what native DnD provides. HTML5 drag & drop is built around discrete drop targets: you get a browser-rendered ghost image you cannot restyle mid-drag, no reliable per-pixel coordinates on some platforms, and no way to live-update the block's time label or snap position during the gesture. Pointer events give raw coordinates every frame, so the block itself moves, snaps, relabels, and re-parents across columns in real time — and setPointerCapture routes all subsequent moves to the captured element even when the pointer is over a different column, another event, or briefly outside the calendar, which is precisely the cross-column case this UI lives on. touch-action: none on the blocks completes the setup by stopping mobile browsers from hijacking the gesture for scrolling. The rule of thumb across this library: native DnD for discrete-slot reordering (the [Dashboard Widget Grid] case), pointer events for continuous spatial manipulation like this.

With the lane-packing algorithm every major calendar uses, run per column at render time. Sort the column's events by start; walk them maintaining a list of lanes, each remembering when its last event ends; place each event into the first lane whose last end ≤ this start (they don't collide), or open a new lane if none fits. The number of lanes any event's time range intersects determines its width: with laneCount concurrent lanes, set left: (laneIndex / laneCount) × 100% and width: calc(100%/laneCount − 8px), keeping the 4px side insets. This greedy interval-partitioning is ~15 lines, provably uses the minimum lanes, and handles the classic Google-Calendar visual (two meetings side by side, a third overlapping both squeezing to thirds). Run it inside render() so dragging into a collision re-packs live — and if your domain forbids overlaps entirely (rooms, machines), skip packing and instead reject the drop in pointermove by not committing the data change when a scan finds a collision.

React: events become state, blocks render from the array with style={{ top: (ev.start-START)*HOUR_H, height: ev.dur*HOUR_H }} and key={ev.id}, and the drag handlers update state instead of the DOM — but throttle the pointermove commits: update a ref during the gesture and flush to state only when the snapped value actually changes (this snippet's if (h !== ev.start) guard is that throttle, and it matters more in React where each commit re-renders). Re-parenting across columns falls out of render automatically since each column filters events by day — no appendChild needed, which is the main structural simplification. Angular mirrors it with a signal array, @for per column filtered by day, and handlers via host listeners; run pointermove outside the zone if profiling shows change-detection pressure. Tailwind: the frame is grid grid-cols-[48px_repeat(5,1fr)] bg-slate-900 border border-slate-700 rounded-xl overflow-hidden; day columns relative border-l border-slate-800 with the hour-line repeating gradient as an arbitrary value or a config utility; events are absolute inset-x-1 rounded-lg border-l-[3px] p-1.5 text-[10.5px] cursor-grab touch-none with per-colour classes like bg-indigo-500/20 border-indigo-400 text-indigo-200 and a data-[dragging]:shadow-2xl data-[dragging]:brightness-115 data-[dragging]:z-10 lift.