@super-calendar/dom 2.4.0 → 2.5.0

package/dist/index.d.mts

@@ -627,7 +627,7 @@ declare function DateRangePicker({ value, onChange, formatLabel, weekStartsOn, h
  * Styleable parts of {@link ResourceTimeline}. Pass a class or inline style per
  * slot via the `classNames` / `styles` props.
  */
-type ResourceTimelineSlot = "header" | "corner" | "timeAxis" | "hourTick" | "resourceLabel" | "row" | "track" | "gridLines" | "event" | "eventBox";
+type ResourceTimelineSlot = "header" | "corner" | "timeAxis" | "hourTick" | "resourceLabel" | "row" | "track" | "gridLines" | "businessHours" | "event" | "eventBox" | "createGhost";
 /** A schedulable lane (room, person, machine) that events are grouped under. */
 interface Resource {
   /** Stable id events reference via their `resourceId`. */
@@ -689,6 +689,19 @@ interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<ResourceTime
    * proposed new start/end. Return `false` to reject the drop (it snaps back).
    */
   onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Tap empty lane space; called with the snapped time and the lane's resource. */
+  onPressCell?: (at: Date, resource: Resource) => void;
+  /** Drag empty lane space to create; called with the swept start/end and the lane's resource. */
+  onCreateEvent?: (start: Date, end: Date, resource: Resource) => void;
+  /**
+   * Shade the hours outside this window, per lane. Same shape as the Calendar's
+   * `businessHours` plus the lane's resource, so per-resource opening hours work
+   * (return `null` for a fully closed lane). A date-only function is accepted.
+   */
+  businessHours?: (date: Date, resource: Resource) => {
+    start: number;
+    end: number;
+  } | null;
   /** Snap dragged events to this many minutes (default 15). */
   dragStepMinutes?: number;
   /** Class applied to the root element. */
@@ -712,6 +725,6 @@ interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<ResourceTime
  * />
  * ```
  */
-declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, dragStepMinutes, className, style, classNames, styles }: ResourceTimelineProps<T>): ReactElement;
+declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, onPressCell, onCreateEvent, businessHours, dragStepMinutes, className, style, classNames, styles }: ResourceTimelineProps<T>): ReactElement;
 //#endregion
 export { Agenda, type AgendaProps, type AgendaSlot, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarSlot, DatePicker, type DatePickerProps, type DatePickerSlot, type DateRange, DateRangePicker, type DateRangePickerProps, type DateSelectionConstraints, type DaySelectionState, type DomAgendaEvent, type DomAgendaEventArgs, type DomCalendarTheme, type DomMonthEvent, type DomMonthEventArgs, type DomRenderEvent, type DomRenderEventArgs, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type ICalEvent, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, type MonthListSlot, MonthView, type MonthViewProps, type MonthViewSlot, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type ResolvedSlot, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, type ResourceTimelineSlot, type SlotDefault, type SlotStyleProps, TimeGrid, type TimeGridMode, type TimeGridProps, type TimeGridSlot, type ToICalendarOptions, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, buildMonthGrid, darkDomTheme, daySelectionState, defaultDomTheme, expandRecurringEvents, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, mergeDomTheme, nextDateRange, parseICalendar, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken };

package/dist/index.d.ts

@@ -627,7 +627,7 @@ declare function DateRangePicker({ value, onChange, formatLabel, weekStartsOn, h
  * Styleable parts of {@link ResourceTimeline}. Pass a class or inline style per
  * slot via the `classNames` / `styles` props.
  */
-type ResourceTimelineSlot = "header" | "corner" | "timeAxis" | "hourTick" | "resourceLabel" | "row" | "track" | "gridLines" | "event" | "eventBox";
+type ResourceTimelineSlot = "header" | "corner" | "timeAxis" | "hourTick" | "resourceLabel" | "row" | "track" | "gridLines" | "businessHours" | "event" | "eventBox" | "createGhost";
 /** A schedulable lane (room, person, machine) that events are grouped under. */
 interface Resource {
   /** Stable id events reference via their `resourceId`. */
@@ -689,6 +689,19 @@ interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<ResourceTime
    * proposed new start/end. Return `false` to reject the drop (it snaps back).
    */
   onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Tap empty lane space; called with the snapped time and the lane's resource. */
+  onPressCell?: (at: Date, resource: Resource) => void;
+  /** Drag empty lane space to create; called with the swept start/end and the lane's resource. */
+  onCreateEvent?: (start: Date, end: Date, resource: Resource) => void;
+  /**
+   * Shade the hours outside this window, per lane. Same shape as the Calendar's
+   * `businessHours` plus the lane's resource, so per-resource opening hours work
+   * (return `null` for a fully closed lane). A date-only function is accepted.
+   */
+  businessHours?: (date: Date, resource: Resource) => {
+    start: number;
+    end: number;
+  } | null;
   /** Snap dragged events to this many minutes (default 15). */
   dragStepMinutes?: number;
   /** Class applied to the root element. */
@@ -712,6 +725,6 @@ interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<ResourceTime
  * />
  * ```
  */
-declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, dragStepMinutes, className, style, classNames, styles }: ResourceTimelineProps<T>): ReactElement;
+declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, onPressCell, onCreateEvent, businessHours, dragStepMinutes, className, style, classNames, styles }: ResourceTimelineProps<T>): ReactElement;
 //#endregion
 export { Agenda, type AgendaProps, type AgendaSlot, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarSlot, DatePicker, type DatePickerProps, type DatePickerSlot, type DateRange, DateRangePicker, type DateRangePickerProps, type DateSelectionConstraints, type DaySelectionState, type DomAgendaEvent, type DomAgendaEventArgs, type DomCalendarTheme, type DomMonthEvent, type DomMonthEventArgs, type DomRenderEvent, type DomRenderEventArgs, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type ICalEvent, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, type MonthListSlot, MonthView, type MonthViewProps, type MonthViewSlot, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type ResolvedSlot, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, type ResourceTimelineSlot, type SlotDefault, type SlotStyleProps, TimeGrid, type TimeGridMode, type TimeGridProps, type TimeGridSlot, type ToICalendarOptions, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, buildMonthGrid, darkDomTheme, daySelectionState, defaultDomTheme, expandRecurringEvents, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, mergeDomTheme, nextDateRange, parseICalendar, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken };

package/dist/index.js

@@ -2092,7 +2092,7 @@ function DefaultBar({ event, height, boxProps, theme }) {
 * />
 * ```
 */
-function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15, className, style, classNames, styles }) {
+function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, onPressCell, onCreateEvent, businessHours, dragStepMinutes = 15, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
 	const slot = createSlots({
 		classNames,
@@ -2171,6 +2171,69 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 		applyDrag(null);
 		origin.current = null;
 	};
+	const [createBox, setCreateBox] = (0, react.useState)(null);
+	const createOrigin = (0, react.useRef)(null);
+	const cellEnabled = !!onPressCell || !!onCreateEvent;
+	const pxAlongAxis = (el, e) => {
+		const rect = el.getBoundingClientRect();
+		return vertical ? e.clientY - rect.top : e.clientX - rect.left;
+	};
+	const beginCreate = (e, resource) => {
+		if (!cellEnabled || e.pointerType === "touch") return;
+		if (e.target !== e.currentTarget || e.button > 0) return;
+		const el = e.currentTarget;
+		const startPx = pxAlongAxis(el, e);
+		try {
+			el.setPointerCapture?.(e.pointerId);
+		} catch {}
+		createOrigin.current = {
+			el,
+			resource,
+			startPx
+		};
+		if (onCreateEvent) setCreateBox({
+			resourceKey: resource.id,
+			startPx,
+			curPx: startPx
+		});
+	};
+	const moveCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o || !onCreateEvent) return;
+		setCreateBox({
+			resourceKey: o.resource.id,
+			startPx: o.startPx,
+			curPx: pxAlongAxis(o.el, e)
+		});
+	};
+	const endCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o) return;
+		try {
+			o.el.releasePointerCapture?.(e.pointerId);
+		} catch {}
+		const endPx = pxAlongAxis(o.el, e);
+		if (Math.abs(endPx - o.startPx) > 4 && onCreateEvent) {
+			const range = (0, _super_calendar_core.cellRangeFromDrag)(date, o.startPx, endPx, hourSize, startHour, dragStepMinutes);
+			if (range) onCreateEvent(range.start, range.end, o.resource);
+		} else if (onPressCell) {
+			const at = (0, _super_calendar_core.cellRangeFromDrag)(date, o.startPx, o.startPx, hourSize, startHour, dragStepMinutes);
+			if (at) onPressCell(at.start, o.resource);
+		}
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const cancelCreate = () => {
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const trackInteractionProps = (resource) => cellEnabled ? {
+		onPointerDown: (e) => beginCreate(e, resource),
+		onPointerMove: moveCreate,
+		onPointerUp: endCreate,
+		onPointerCancel: cancelCreate
+	} : null;
+	const bandsFor = (resource) => businessHours ? (0, _super_calendar_core.closedHourBands)(date, (d) => businessHours(d, resource), startHour, endHour) : [];
 	const hours = (0, react.useMemo)(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
 	const trackWidth = (endHour - startHour) * hourWidth;
 	const byResource = (0, react.useMemo)(() => {
@@ -2267,85 +2330,124 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 							themed: { borderLeft: `1px solid ${theme.gridLine}` }
 						}),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							...trackInteractionProps(resource),
 							...slot("track", { base: {
 								position: "relative",
 								height: trackHeight
 							} }),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								"aria-hidden": true,
-								...slot("gridLines", {
-									base: {
-										position: "absolute",
-										inset: 0,
-										pointerEvents: "none"
-									},
-									themed: { backgroundImage: vGridLines }
-								})
-							}), positioned.map((pe, idx) => {
-								const key = `${resource.id}:${idx}`;
-								const active = drag?.key === key ? drag : null;
-								const startH = active ? active.startHours : pe.startHours;
-								const durH = active ? active.durationHours : pe.durationHours;
-								const top = clamp(startH - startHour, 0, endHour - startHour) * hourHeight;
-								const bottom = clamp(startH + durH - startHour, 0, endHour - startHour) * hourHeight;
-								const height = Math.max(bottom - top, 2);
-								const lanePct = 100 / pe.columns;
-								const onPress = () => onPressEvent?.(pe.event);
-								const args = {
-									event: pe.event,
-									width: 0,
-									height,
-									onPress
-								};
-								const draggable = !!onDragEvent;
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									onClick: draggable ? void 0 : onPress,
-									"aria-label": pe.event.title,
-									...dataState({ "data-dragging": !!active }),
-									onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
-									onPointerMove: draggable ? moveDrag : void 0,
-									onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
-									onPointerCancel: draggable ? cancelDrag : void 0,
-									...slot("event", { base: {
-										position: "absolute",
-										top,
-										height,
-										left: `${pe.column * lanePct}%`,
-										width: `${lanePct}%`,
-										padding: 1,
-										border: "none",
-										background: "transparent",
-										cursor: draggable ? "grab" : "pointer",
-										touchAction: draggable ? "none" : "auto",
-										font: "inherit",
-										textAlign: "left",
-										boxSizing: "border-box",
-										zIndex: active ? 3 : 1,
-										opacity: active ? .85 : 1
-									} }),
-									children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultBar, {
-										...args,
-										theme,
-										boxProps: slot("eventBox")
-									}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										"aria-hidden": true,
-										onPointerDown: (e) => {
-											e.stopPropagation();
-											beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
-										},
-										style: {
+							children: [
+								bandsFor(resource).map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"aria-hidden": true,
+									...slot("businessHours", {
+										base: {
 											position: "absolute",
 											left: 0,
 											right: 0,
-											bottom: 0,
-											height: 8,
-											cursor: "ns-resize",
-											touchAction: "none"
+											top: (b.start - startHour) * hourHeight,
+											height: (b.end - b.start) * hourHeight,
+											pointerEvents: "none",
+											zIndex: 0
+										},
+										themed: { background: theme.outsideHoursBackground }
+									})
+								}, b.start)),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"aria-hidden": true,
+									...slot("gridLines", {
+										base: {
+											position: "absolute",
+											inset: 0,
+											pointerEvents: "none"
+										},
+										themed: { backgroundImage: vGridLines }
+									})
+								}),
+								positioned.map((pe, idx) => {
+									const key = `${resource.id}:${idx}`;
+									const active = drag?.key === key ? drag : null;
+									const startH = active ? active.startHours : pe.startHours;
+									const durH = active ? active.durationHours : pe.durationHours;
+									const top = clamp(startH - startHour, 0, endHour - startHour) * hourHeight;
+									const bottom = clamp(startH + durH - startHour, 0, endHour - startHour) * hourHeight;
+									const height = Math.max(bottom - top, 2);
+									const lanePct = 100 / pe.columns;
+									const onPress = () => onPressEvent?.(pe.event);
+									const args = {
+										event: pe.event,
+										width: 0,
+										height,
+										onPress
+									};
+									const draggable = !!onDragEvent;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										onClick: draggable ? void 0 : onPress,
+										"aria-label": pe.event.title,
+										...dataState({ "data-dragging": !!active }),
+										onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+										onPointerMove: draggable ? moveDrag : void 0,
+										onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+										onPointerCancel: draggable ? cancelDrag : void 0,
+										...slot("event", { base: {
+											position: "absolute",
+											top,
+											height,
+											left: `${pe.column * lanePct}%`,
+											width: `${lanePct}%`,
+											padding: 1,
+											border: "none",
+											background: "transparent",
+											cursor: draggable ? "grab" : "pointer",
+											touchAction: draggable ? "none" : "auto",
+											font: "inherit",
+											textAlign: "left",
+											boxSizing: "border-box",
+											zIndex: active ? 3 : 1,
+											opacity: active ? .85 : 1
+										} }),
+										children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultBar, {
+											...args,
+											theme,
+											boxProps: slot("eventBox")
+										}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											"aria-hidden": true,
+											onPointerDown: (e) => {
+												e.stopPropagation();
+												beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+											},
+											style: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												height: 8,
+												cursor: "ns-resize",
+												touchAction: "none"
+											}
+										}) : null]
+									}, idx);
+								}),
+								createBox?.resourceKey === resource.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"aria-hidden": true,
+									...slot("createGhost", {
+										base: {
+											position: "absolute",
+											left: 1,
+											right: 1,
+											top: Math.min(createBox.startPx, createBox.curPx),
+											height: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+											opacity: .7,
+											pointerEvents: "none",
+											zIndex: 2
+										},
+										themed: {
+											background: theme.rangeBackground,
+											border: `1px solid ${theme.selectedBackground}`,
+											borderRadius: 6
 										}
-									}) : null]
-								}, idx);
-							})]
+									})
+								}) : null
+							]
 						})
 					}, resource.id);
 				})]
@@ -2420,84 +2522,123 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 						}),
 						children: resource.title ?? resource.id
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						...trackInteractionProps(resource),
 						...slot("track", { base: {
 							position: "relative",
 							width: trackWidth
 						} }),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							"aria-hidden": true,
-							...slot("gridLines", {
-								base: {
-									position: "absolute",
-									inset: 0,
-									pointerEvents: "none"
-								},
-								themed: { backgroundImage: gridLines }
-							})
-						}), positioned.map((pe, idx) => {
-							const key = `${resource.id}:${idx}`;
-							const active = drag?.key === key ? drag : null;
-							const startH = active ? active.startHours : pe.startHours;
-							const durH = active ? active.durationHours : pe.durationHours;
-							const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
-							const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
-							const width = Math.max(right - left, 2);
-							const laneHeight = rowHeight / pe.columns;
-							const onPress = () => onPressEvent?.(pe.event);
-							const args = {
-								event: pe.event,
-								width,
-								onPress
-							};
-							const draggable = !!onDragEvent;
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								onClick: draggable ? void 0 : onPress,
-								"aria-label": pe.event.title,
-								...dataState({ "data-dragging": !!active }),
-								onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
-								onPointerMove: draggable ? moveDrag : void 0,
-								onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
-								onPointerCancel: draggable ? cancelDrag : void 0,
-								...slot("event", { base: {
-									position: "absolute",
-									left,
-									width,
-									top: pe.column * laneHeight,
-									height: laneHeight,
-									padding: 1,
-									border: "none",
-									background: "transparent",
-									cursor: draggable ? "grab" : "pointer",
-									touchAction: draggable ? "none" : "auto",
-									font: "inherit",
-									textAlign: "left",
-									boxSizing: "border-box",
-									zIndex: active ? 3 : 1,
-									opacity: active ? .85 : 1
-								} }),
-								children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultBar, {
-									...args,
-									theme,
-									boxProps: slot("eventBox")
-								}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									"aria-hidden": true,
-									onPointerDown: (e) => {
-										e.stopPropagation();
-										beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
-									},
-									style: {
+						children: [
+							bandsFor(resource).map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								"aria-hidden": true,
+								...slot("businessHours", {
+									base: {
 										position: "absolute",
 										top: 0,
 										bottom: 0,
-										right: 0,
-										width: 8,
-										cursor: "ew-resize",
-										touchAction: "none"
+										left: (b.start - startHour) * hourWidth,
+										width: (b.end - b.start) * hourWidth,
+										pointerEvents: "none",
+										zIndex: 0
+									},
+									themed: { background: theme.outsideHoursBackground }
+								})
+							}, b.start)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								"aria-hidden": true,
+								...slot("gridLines", {
+									base: {
+										position: "absolute",
+										inset: 0,
+										pointerEvents: "none"
+									},
+									themed: { backgroundImage: gridLines }
+								})
+							}),
+							positioned.map((pe, idx) => {
+								const key = `${resource.id}:${idx}`;
+								const active = drag?.key === key ? drag : null;
+								const startH = active ? active.startHours : pe.startHours;
+								const durH = active ? active.durationHours : pe.durationHours;
+								const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
+								const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
+								const width = Math.max(right - left, 2);
+								const laneHeight = rowHeight / pe.columns;
+								const onPress = () => onPressEvent?.(pe.event);
+								const args = {
+									event: pe.event,
+									width,
+									onPress
+								};
+								const draggable = !!onDragEvent;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									onClick: draggable ? void 0 : onPress,
+									"aria-label": pe.event.title,
+									...dataState({ "data-dragging": !!active }),
+									onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+									onPointerMove: draggable ? moveDrag : void 0,
+									onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+									onPointerCancel: draggable ? cancelDrag : void 0,
+									...slot("event", { base: {
+										position: "absolute",
+										left,
+										width,
+										top: pe.column * laneHeight,
+										height: laneHeight,
+										padding: 1,
+										border: "none",
+										background: "transparent",
+										cursor: draggable ? "grab" : "pointer",
+										touchAction: draggable ? "none" : "auto",
+										font: "inherit",
+										textAlign: "left",
+										boxSizing: "border-box",
+										zIndex: active ? 3 : 1,
+										opacity: active ? .85 : 1
+									} }),
+									children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultBar, {
+										...args,
+										theme,
+										boxProps: slot("eventBox")
+									}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"aria-hidden": true,
+										onPointerDown: (e) => {
+											e.stopPropagation();
+											beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+										},
+										style: {
+											position: "absolute",
+											top: 0,
+											bottom: 0,
+											right: 0,
+											width: 8,
+											cursor: "ew-resize",
+											touchAction: "none"
+										}
+									}) : null]
+								}, idx);
+							}),
+							createBox?.resourceKey === resource.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								"aria-hidden": true,
+								...slot("createGhost", {
+									base: {
+										position: "absolute",
+										top: 1,
+										bottom: 1,
+										left: Math.min(createBox.startPx, createBox.curPx),
+										width: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+										opacity: .7,
+										pointerEvents: "none",
+										zIndex: 2
+									},
+									themed: {
+										background: theme.rangeBackground,
+										border: `1px solid ${theme.selectedBackground}`,
+										borderRadius: 6
 									}
-								}) : null]
-							}, idx);
-						})]
+								})
+							}) : null
+						]
 					})]
 				}, resource.id);
 			})]

package/dist/index.mjs

@@ -2091,7 +2091,7 @@ function DefaultBar({ event, height, boxProps, theme }) {
 * />
 * ```
 */
-function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15, className, style, classNames, styles }) {
+function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, onPressCell, onCreateEvent, businessHours, dragStepMinutes = 15, className, style, classNames, styles }) {
 	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
 	const slot = createSlots({
 		classNames,
@@ -2170,6 +2170,69 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 		applyDrag(null);
 		origin.current = null;
 	};
+	const [createBox, setCreateBox] = useState(null);
+	const createOrigin = useRef(null);
+	const cellEnabled = !!onPressCell || !!onCreateEvent;
+	const pxAlongAxis = (el, e) => {
+		const rect = el.getBoundingClientRect();
+		return vertical ? e.clientY - rect.top : e.clientX - rect.left;
+	};
+	const beginCreate = (e, resource) => {
+		if (!cellEnabled || e.pointerType === "touch") return;
+		if (e.target !== e.currentTarget || e.button > 0) return;
+		const el = e.currentTarget;
+		const startPx = pxAlongAxis(el, e);
+		try {
+			el.setPointerCapture?.(e.pointerId);
+		} catch {}
+		createOrigin.current = {
+			el,
+			resource,
+			startPx
+		};
+		if (onCreateEvent) setCreateBox({
+			resourceKey: resource.id,
+			startPx,
+			curPx: startPx
+		});
+	};
+	const moveCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o || !onCreateEvent) return;
+		setCreateBox({
+			resourceKey: o.resource.id,
+			startPx: o.startPx,
+			curPx: pxAlongAxis(o.el, e)
+		});
+	};
+	const endCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o) return;
+		try {
+			o.el.releasePointerCapture?.(e.pointerId);
+		} catch {}
+		const endPx = pxAlongAxis(o.el, e);
+		if (Math.abs(endPx - o.startPx) > 4 && onCreateEvent) {
+			const range = cellRangeFromDrag(date, o.startPx, endPx, hourSize, startHour, dragStepMinutes);
+			if (range) onCreateEvent(range.start, range.end, o.resource);
+		} else if (onPressCell) {
+			const at = cellRangeFromDrag(date, o.startPx, o.startPx, hourSize, startHour, dragStepMinutes);
+			if (at) onPressCell(at.start, o.resource);
+		}
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const cancelCreate = () => {
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const trackInteractionProps = (resource) => cellEnabled ? {
+		onPointerDown: (e) => beginCreate(e, resource),
+		onPointerMove: moveCreate,
+		onPointerUp: endCreate,
+		onPointerCancel: cancelCreate
+	} : null;
+	const bandsFor = (resource) => businessHours ? closedHourBands(date, (d) => businessHours(d, resource), startHour, endHour) : [];
 	const hours = useMemo(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
 	const trackWidth = (endHour - startHour) * hourWidth;
 	const byResource = useMemo(() => {
@@ -2266,85 +2329,124 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 							themed: { borderLeft: `1px solid ${theme.gridLine}` }
 						}),
 						children: /* @__PURE__ */ jsxs("div", {
+							...trackInteractionProps(resource),
 							...slot("track", { base: {
 								position: "relative",
 								height: trackHeight
 							} }),
-							children: [/* @__PURE__ */ jsx("div", {
-								"aria-hidden": true,
-								...slot("gridLines", {
-									base: {
-										position: "absolute",
-										inset: 0,
-										pointerEvents: "none"
-									},
-									themed: { backgroundImage: vGridLines }
-								})
-							}), positioned.map((pe, idx) => {
-								const key = `${resource.id}:${idx}`;
-								const active = drag?.key === key ? drag : null;
-								const startH = active ? active.startHours : pe.startHours;
-								const durH = active ? active.durationHours : pe.durationHours;
-								const top = clamp(startH - startHour, 0, endHour - startHour) * hourHeight;
-								const bottom = clamp(startH + durH - startHour, 0, endHour - startHour) * hourHeight;
-								const height = Math.max(bottom - top, 2);
-								const lanePct = 100 / pe.columns;
-								const onPress = () => onPressEvent?.(pe.event);
-								const args = {
-									event: pe.event,
-									width: 0,
-									height,
-									onPress
-								};
-								const draggable = !!onDragEvent;
-								return /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									onClick: draggable ? void 0 : onPress,
-									"aria-label": pe.event.title,
-									...dataState({ "data-dragging": !!active }),
-									onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
-									onPointerMove: draggable ? moveDrag : void 0,
-									onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
-									onPointerCancel: draggable ? cancelDrag : void 0,
-									...slot("event", { base: {
-										position: "absolute",
-										top,
-										height,
-										left: `${pe.column * lanePct}%`,
-										width: `${lanePct}%`,
-										padding: 1,
-										border: "none",
-										background: "transparent",
-										cursor: draggable ? "grab" : "pointer",
-										touchAction: draggable ? "none" : "auto",
-										font: "inherit",
-										textAlign: "left",
-										boxSizing: "border-box",
-										zIndex: active ? 3 : 1,
-										opacity: active ? .85 : 1
-									} }),
-									children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
-										...args,
-										theme,
-										boxProps: slot("eventBox")
-									}), draggable ? /* @__PURE__ */ jsx("span", {
-										"aria-hidden": true,
-										onPointerDown: (e) => {
-											e.stopPropagation();
-											beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
-										},
-										style: {
+							children: [
+								bandsFor(resource).map((b) => /* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									...slot("businessHours", {
+										base: {
 											position: "absolute",
 											left: 0,
 											right: 0,
-											bottom: 0,
-											height: 8,
-											cursor: "ns-resize",
-											touchAction: "none"
+											top: (b.start - startHour) * hourHeight,
+											height: (b.end - b.start) * hourHeight,
+											pointerEvents: "none",
+											zIndex: 0
+										},
+										themed: { background: theme.outsideHoursBackground }
+									})
+								}, b.start)),
+								/* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									...slot("gridLines", {
+										base: {
+											position: "absolute",
+											inset: 0,
+											pointerEvents: "none"
+										},
+										themed: { backgroundImage: vGridLines }
+									})
+								}),
+								positioned.map((pe, idx) => {
+									const key = `${resource.id}:${idx}`;
+									const active = drag?.key === key ? drag : null;
+									const startH = active ? active.startHours : pe.startHours;
+									const durH = active ? active.durationHours : pe.durationHours;
+									const top = clamp(startH - startHour, 0, endHour - startHour) * hourHeight;
+									const bottom = clamp(startH + durH - startHour, 0, endHour - startHour) * hourHeight;
+									const height = Math.max(bottom - top, 2);
+									const lanePct = 100 / pe.columns;
+									const onPress = () => onPressEvent?.(pe.event);
+									const args = {
+										event: pe.event,
+										width: 0,
+										height,
+										onPress
+									};
+									const draggable = !!onDragEvent;
+									return /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: draggable ? void 0 : onPress,
+										"aria-label": pe.event.title,
+										...dataState({ "data-dragging": !!active }),
+										onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+										onPointerMove: draggable ? moveDrag : void 0,
+										onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+										onPointerCancel: draggable ? cancelDrag : void 0,
+										...slot("event", { base: {
+											position: "absolute",
+											top,
+											height,
+											left: `${pe.column * lanePct}%`,
+											width: `${lanePct}%`,
+											padding: 1,
+											border: "none",
+											background: "transparent",
+											cursor: draggable ? "grab" : "pointer",
+											touchAction: draggable ? "none" : "auto",
+											font: "inherit",
+											textAlign: "left",
+											boxSizing: "border-box",
+											zIndex: active ? 3 : 1,
+											opacity: active ? .85 : 1
+										} }),
+										children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
+											...args,
+											theme,
+											boxProps: slot("eventBox")
+										}), draggable ? /* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											onPointerDown: (e) => {
+												e.stopPropagation();
+												beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+											},
+											style: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												height: 8,
+												cursor: "ns-resize",
+												touchAction: "none"
+											}
+										}) : null]
+									}, idx);
+								}),
+								createBox?.resourceKey === resource.id ? /* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									...slot("createGhost", {
+										base: {
+											position: "absolute",
+											left: 1,
+											right: 1,
+											top: Math.min(createBox.startPx, createBox.curPx),
+											height: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+											opacity: .7,
+											pointerEvents: "none",
+											zIndex: 2
+										},
+										themed: {
+											background: theme.rangeBackground,
+											border: `1px solid ${theme.selectedBackground}`,
+											borderRadius: 6
 										}
-									}) : null]
-								}, idx);
-							})]
+									})
+								}) : null
+							]
 						})
 					}, resource.id);
 				})]
@@ -2419,84 +2521,123 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 						}),
 						children: resource.title ?? resource.id
 					}), /* @__PURE__ */ jsxs("div", {
+						...trackInteractionProps(resource),
 						...slot("track", { base: {
 							position: "relative",
 							width: trackWidth
 						} }),
-						children: [/* @__PURE__ */ jsx("div", {
-							"aria-hidden": true,
-							...slot("gridLines", {
-								base: {
-									position: "absolute",
-									inset: 0,
-									pointerEvents: "none"
-								},
-								themed: { backgroundImage: gridLines }
-							})
-						}), positioned.map((pe, idx) => {
-							const key = `${resource.id}:${idx}`;
-							const active = drag?.key === key ? drag : null;
-							const startH = active ? active.startHours : pe.startHours;
-							const durH = active ? active.durationHours : pe.durationHours;
-							const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
-							const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
-							const width = Math.max(right - left, 2);
-							const laneHeight = rowHeight / pe.columns;
-							const onPress = () => onPressEvent?.(pe.event);
-							const args = {
-								event: pe.event,
-								width,
-								onPress
-							};
-							const draggable = !!onDragEvent;
-							return /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: draggable ? void 0 : onPress,
-								"aria-label": pe.event.title,
-								...dataState({ "data-dragging": !!active }),
-								onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
-								onPointerMove: draggable ? moveDrag : void 0,
-								onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
-								onPointerCancel: draggable ? cancelDrag : void 0,
-								...slot("event", { base: {
-									position: "absolute",
-									left,
-									width,
-									top: pe.column * laneHeight,
-									height: laneHeight,
-									padding: 1,
-									border: "none",
-									background: "transparent",
-									cursor: draggable ? "grab" : "pointer",
-									touchAction: draggable ? "none" : "auto",
-									font: "inherit",
-									textAlign: "left",
-									boxSizing: "border-box",
-									zIndex: active ? 3 : 1,
-									opacity: active ? .85 : 1
-								} }),
-								children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
-									...args,
-									theme,
-									boxProps: slot("eventBox")
-								}), draggable ? /* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									onPointerDown: (e) => {
-										e.stopPropagation();
-										beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
-									},
-									style: {
+						children: [
+							bandsFor(resource).map((b) => /* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								...slot("businessHours", {
+									base: {
 										position: "absolute",
 										top: 0,
 										bottom: 0,
-										right: 0,
-										width: 8,
-										cursor: "ew-resize",
-										touchAction: "none"
+										left: (b.start - startHour) * hourWidth,
+										width: (b.end - b.start) * hourWidth,
+										pointerEvents: "none",
+										zIndex: 0
+									},
+									themed: { background: theme.outsideHoursBackground }
+								})
+							}, b.start)),
+							/* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								...slot("gridLines", {
+									base: {
+										position: "absolute",
+										inset: 0,
+										pointerEvents: "none"
+									},
+									themed: { backgroundImage: gridLines }
+								})
+							}),
+							positioned.map((pe, idx) => {
+								const key = `${resource.id}:${idx}`;
+								const active = drag?.key === key ? drag : null;
+								const startH = active ? active.startHours : pe.startHours;
+								const durH = active ? active.durationHours : pe.durationHours;
+								const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
+								const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
+								const width = Math.max(right - left, 2);
+								const laneHeight = rowHeight / pe.columns;
+								const onPress = () => onPressEvent?.(pe.event);
+								const args = {
+									event: pe.event,
+									width,
+									onPress
+								};
+								const draggable = !!onDragEvent;
+								return /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: draggable ? void 0 : onPress,
+									"aria-label": pe.event.title,
+									...dataState({ "data-dragging": !!active }),
+									onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+									onPointerMove: draggable ? moveDrag : void 0,
+									onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+									onPointerCancel: draggable ? cancelDrag : void 0,
+									...slot("event", { base: {
+										position: "absolute",
+										left,
+										width,
+										top: pe.column * laneHeight,
+										height: laneHeight,
+										padding: 1,
+										border: "none",
+										background: "transparent",
+										cursor: draggable ? "grab" : "pointer",
+										touchAction: draggable ? "none" : "auto",
+										font: "inherit",
+										textAlign: "left",
+										boxSizing: "border-box",
+										zIndex: active ? 3 : 1,
+										opacity: active ? .85 : 1
+									} }),
+									children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
+										...args,
+										theme,
+										boxProps: slot("eventBox")
+									}), draggable ? /* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										onPointerDown: (e) => {
+											e.stopPropagation();
+											beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+										},
+										style: {
+											position: "absolute",
+											top: 0,
+											bottom: 0,
+											right: 0,
+											width: 8,
+											cursor: "ew-resize",
+											touchAction: "none"
+										}
+									}) : null]
+								}, idx);
+							}),
+							createBox?.resourceKey === resource.id ? /* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								...slot("createGhost", {
+									base: {
+										position: "absolute",
+										top: 1,
+										bottom: 1,
+										left: Math.min(createBox.startPx, createBox.curPx),
+										width: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+										opacity: .7,
+										pointerEvents: "none",
+										zIndex: 2
+									},
+									themed: {
+										background: theme.rangeBackground,
+										border: `1px solid ${theme.selectedBackground}`,
+										borderRadius: 6
 									}
-								}) : null]
-							}, idx);
-						})]
+								})
+							}) : null
+						]
 					})]
 				}, resource.id);
 			})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super-calendar/dom",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Virtualized month / week / day calendar and date picker for react-dom. No React Native, no react-native-web.",
   "keywords": [
     "calendar",
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@super-calendar/core": "2.4.0"
+    "@super-calendar/core": "2.5.0"
   },
   "peerDependencies": {
     "@legendapp/list": ">=3",

package/src/ResourceTimeline.tsx

@@ -8,6 +8,8 @@ import type {
 import { useMemo, useRef, useState } from "react";
 import {
   type CalendarEvent,
+  cellRangeFromDrag,
+  closedHourBands,
   eventTimeLabel,
   formatHour,
   layoutDayEvents,
@@ -28,8 +30,10 @@ export type ResourceTimelineSlot =
   | "row"
   | "track"
   | "gridLines"
+  | "businessHours"
   | "event"
-  | "eventBox";
+  | "eventBox"
+  | "createGhost";
 
 /** A schedulable lane (room, person, machine) that events are grouped under. */
 export interface Resource {
@@ -94,6 +98,16 @@ export interface ResourceTimelineProps<T = unknown> extends SlotStyleProps<Resou
    * proposed new start/end. Return `false` to reject the drop (it snaps back).
    */
   onDragEvent?: (event: CalendarEvent<T>, start: Date, end: Date) => void | boolean;
+  /** Tap empty lane space; called with the snapped time and the lane's resource. */
+  onPressCell?: (at: Date, resource: Resource) => void;
+  /** Drag empty lane space to create; called with the swept start/end and the lane's resource. */
+  onCreateEvent?: (start: Date, end: Date, resource: Resource) => void;
+  /**
+   * Shade the hours outside this window, per lane. Same shape as the Calendar's
+   * `businessHours` plus the lane's resource, so per-resource opening hours work
+   * (return `null` for a fully closed lane). A date-only function is accepted.
+   */
+  businessHours?: (date: Date, resource: Resource) => { start: number; end: number } | null;
   /** Snap dragged events to this many minutes (default 15). */
   dragStepMinutes?: number;
   /** Class applied to the root element. */
@@ -198,6 +212,9 @@ export function ResourceTimeline<T = unknown>({
   renderEvent,
   onPressEvent,
   onDragEvent,
+  onPressCell,
+  onCreateEvent,
+  businessHours,
   dragStepMinutes = 15,
   className,
   style,
@@ -285,6 +302,90 @@ export function ResourceTimeline<T = unknown>({
     origin.current = null;
   };
 
+  // Create-by-drag / tap on empty lane space, mirroring the time grid: mouse and
+  // pen sweep out a new event, and a tap without movement fires onPressCell. Touch
+  // is left free to scroll the board, so cell taps are pointer (mouse/pen) only.
+  const [createBox, setCreateBox] = useState<{
+    resourceKey: string;
+    startPx: number;
+    curPx: number;
+  } | null>(null);
+  const createOrigin = useRef<{ el: HTMLElement; resource: Resource; startPx: number } | null>(
+    null,
+  );
+  const cellEnabled = !!onPressCell || !!onCreateEvent;
+  const pxAlongAxis = (el: HTMLElement, e: ReactPointerEvent) => {
+    const rect = el.getBoundingClientRect();
+    return vertical ? e.clientY - rect.top : e.clientX - rect.left;
+  };
+  const beginCreate = (e: ReactPointerEvent, resource: Resource) => {
+    // Only from the lane background, primary button, never on an event bar.
+    if (!cellEnabled || e.pointerType === "touch") return;
+    if (e.target !== e.currentTarget || e.button > 0) return;
+    const el = e.currentTarget as HTMLElement;
+    const startPx = pxAlongAxis(el, e);
+    try {
+      el.setPointerCapture?.(e.pointerId);
+    } catch {
+      // Best-effort capture.
+    }
+    createOrigin.current = { el, resource, startPx };
+    // Only preview a ghost when a create can happen; in press-only mode
+    // (onPressCell without onCreateEvent) the tap still commits via endCreate.
+    if (onCreateEvent) setCreateBox({ resourceKey: resource.id, startPx, curPx: startPx });
+  };
+  const moveCreate = (e: ReactPointerEvent) => {
+    const o = createOrigin.current;
+    if (!o || !onCreateEvent) return;
+    setCreateBox({ resourceKey: o.resource.id, startPx: o.startPx, curPx: pxAlongAxis(o.el, e) });
+  };
+  const endCreate = (e: ReactPointerEvent) => {
+    const o = createOrigin.current;
+    if (!o) return;
+    try {
+      o.el.releasePointerCapture?.(e.pointerId);
+    } catch {
+      // Best-effort release.
+    }
+    const endPx = pxAlongAxis(o.el, e);
+    const moved = Math.abs(endPx - o.startPx) > 4;
+    if (moved && onCreateEvent) {
+      const range = cellRangeFromDrag(date, o.startPx, endPx, hourSize, startHour, dragStepMinutes);
+      if (range) onCreateEvent(range.start, range.end, o.resource);
+    } else if (onPressCell) {
+      const at = cellRangeFromDrag(
+        date,
+        o.startPx,
+        o.startPx,
+        hourSize,
+        startHour,
+        dragStepMinutes,
+      );
+      if (at) onPressCell(at.start, o.resource);
+    }
+    createOrigin.current = null;
+    setCreateBox(null);
+  };
+  // A gesture the browser cancels (scroll takeover, etc.) must not commit.
+  const cancelCreate = () => {
+    createOrigin.current = null;
+    setCreateBox(null);
+  };
+  const trackInteractionProps = (resource: Resource) =>
+    cellEnabled
+      ? {
+          onPointerDown: (e: ReactPointerEvent) => beginCreate(e, resource),
+          onPointerMove: moveCreate,
+          onPointerUp: endCreate,
+          onPointerCancel: cancelCreate,
+        }
+      : null;
+  // The closed-hours bands to shade in a lane, resolved per resource.
+  const bandsFor = (resource: Resource) =>
+    businessHours
+      ? closedHourBands(date, (d) => businessHours(d, resource), startHour, endHour)
+      : [];
+
   const hours = useMemo(
     () => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i),
     [startHour, endHour],
@@ -384,7 +485,29 @@ export function ResourceTimeline<T = unknown>({
                   themed: { borderLeft: `1px solid ${theme.gridLine}` },
                 })}
               >
-                <div {...slot("track", { base: { position: "relative", height: trackHeight } })}>
+                <div
+                  {...trackInteractionProps(resource)}
+                  {...slot("track", { base: { position: "relative", height: trackHeight } })}
+                >
+                  {/* Closed-hours shade, behind the grid lines and events. */}
+                  {bandsFor(resource).map((b) => (
+                    <div
+                      key={b.start}
+                      aria-hidden
+                      {...slot("businessHours", {
+                        base: {
+                          position: "absolute",
+                          left: 0,
+                          right: 0,
+                          top: (b.start - startHour) * hourHeight,
+                          height: (b.end - b.start) * hourHeight,
+                          pointerEvents: "none",
+                          zIndex: 0,
+                        },
+                        themed: { background: theme.outsideHoursBackground },
+                      })}
+                    />
+                  ))}
                   <div
                     aria-hidden
                     {...slot("gridLines", {
@@ -472,6 +595,28 @@ export function ResourceTimeline<T = unknown>({
                       </button>
                     );
                   })}
+                  {createBox?.resourceKey === resource.id ? (
+                    <div
+                      aria-hidden
+                      {...slot("createGhost", {
+                        base: {
+                          position: "absolute",
+                          left: 1,
+                          right: 1,
+                          top: Math.min(createBox.startPx, createBox.curPx),
+                          height: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+                          opacity: 0.7,
+                          pointerEvents: "none",
+                          zIndex: 2,
+                        },
+                        themed: {
+                          background: theme.rangeBackground,
+                          border: `1px solid ${theme.selectedBackground}`,
+                          borderRadius: 6,
+                        },
+                      })}
+                    />
+                  ) : null}
                 </div>
               </div>
             );
@@ -544,7 +689,29 @@ export function ResourceTimeline<T = unknown>({
               >
                 {resource.title ?? resource.id}
               </div>
-              <div {...slot("track", { base: { position: "relative", width: trackWidth } })}>
+              <div
+                {...trackInteractionProps(resource)}
+                {...slot("track", { base: { position: "relative", width: trackWidth } })}
+              >
+                {/* Closed-hours shade, behind the grid lines and events. */}
+                {bandsFor(resource).map((b) => (
+                  <div
+                    key={b.start}
+                    aria-hidden
+                    {...slot("businessHours", {
+                      base: {
+                        position: "absolute",
+                        top: 0,
+                        bottom: 0,
+                        left: (b.start - startHour) * hourWidth,
+                        width: (b.end - b.start) * hourWidth,
+                        pointerEvents: "none",
+                        zIndex: 0,
+                      },
+                      themed: { background: theme.outsideHoursBackground },
+                    })}
+                  />
+                ))}
                 <div
                   aria-hidden
                   {...slot("gridLines", {
@@ -627,6 +794,28 @@ export function ResourceTimeline<T = unknown>({
                     </button>
                   );
                 })}
+                {createBox?.resourceKey === resource.id ? (
+                  <div
+                    aria-hidden
+                    {...slot("createGhost", {
+                      base: {
+                        position: "absolute",
+                        top: 1,
+                        bottom: 1,
+                        left: Math.min(createBox.startPx, createBox.curPx),
+                        width: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+                        opacity: 0.7,
+                        pointerEvents: "none",
+                        zIndex: 2,
+                      },
+                      themed: {
+                        background: theme.rangeBackground,
+                        border: `1px solid ${theme.selectedBackground}`,
+                        borderRadius: 6,
+                      },
+                    })}
+                  />
+                ) : null}
               </div>
             </div>
           );