@super-calendar/native 2.3.2 → 2.5.0

package/src/components/ResourceTimeline.tsx

@@ -1,10 +1,21 @@
 import type { ComponentType, ReactElement } from "react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import {
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import {
   type CalendarEvent,
+  cellRangeFromDrag,
+  closedHourBands,
   eventTimeLabel,
   formatHour,
   layoutDayEvents,
@@ -16,7 +27,11 @@ import { useCalendarTheme } from "../theme";
 
 // Native long-press duration (ms) before a bar is picked up to move.
 const MOVE_ACTIVATE_MS = 250;
+// Web: activate the create sweep past a small drag instead of a long-press, so
+// a plain mouse drag creates (mirrors the time grid).
+const DRAG_ACTIVATE_PX = 8;
 const MINUTES_PER_HOUR = 60;
+const isWeb = Platform.OS === "web";
 
 /** A schedulable lane (room, person, machine) events are grouped under. */
 export interface Resource {
@@ -29,16 +44,28 @@ export interface Resource {
 /** Props passed to a custom resource-timeline event renderer. */
 export interface ResourceEventArgs<T = unknown> {
   event: CalendarEvent<T>;
-  /** Pixel width of the event bar. */
+  /**
+   * Pixel width of the event bar. In the vertical orientation the columns flex
+   * to the container, so this is 0 there; size against `height` instead.
+   */
   width: number;
+  /** Pixel height of the event bar; set in the vertical orientation. */
+  height?: number;
   onPress: () => void;
 }
 
 /** Props for {@link ResourceTimeline}. */
 export interface ResourceTimelineProps<T = unknown> {
-  /** The day to lay out along the horizontal axis. */
+  /** The day to lay out along the time axis. */
   date: Date;
-  /** The rows, top to bottom. */
+  /**
+   * Lay the day out along the horizontal axis with resources as rows (the
+   * default), or down the vertical axis with resources as columns, like the
+   * time grid. Vertical reads better on narrow screens: the columns share the
+   * width instead of the axis scrolling sideways.
+   */
+  orientation?: "horizontal" | "vertical";
+  /** The resource lanes: rows when horizontal, columns when vertical. */
   resources: Resource[];
   /** Events; each is placed in the row named by `resourceId(event)`. */
   events: CalendarEvent<T>[];
@@ -48,11 +75,13 @@ export interface ResourceTimelineProps<T = unknown> {
   startHour?: number;
   /** Last hour shown, exclusive (default 24). */
   endHour?: number;
-  /** Pixels per hour along the axis (default 80). */
+  /** Pixels per hour along the horizontal axis (default 80). Horizontal only. */
   hourWidth?: number;
-  /** Height of each resource row in px (default 56). */
+  /** Pixels per hour down the vertical axis (default 48). Vertical only. */
+  hourHeight?: number;
+  /** Height of each resource row in px (default 56). Horizontal only. */
   rowHeight?: number;
-  /** Width of the left resource-label column in px (default 140). */
+  /** Width of the left resource-label column in px (default 140). Horizontal only. */
   labelWidth?: number;
   /** 12-hour AM/PM axis labels (default false). */
   ampm?: boolean;
@@ -60,20 +89,48 @@ export interface ResourceTimelineProps<T = unknown> {
   renderEvent?: ComponentType<ResourceEventArgs<T>>;
   /** Tap an event. */
   onPressEvent?: (event: CalendarEvent<T>) => void;
+  /**
+   * Long-press an event. When `onDragEvent` is also set, a long-press picks the
+   * bar up to move instead, so this fires only for non-draggable bars.
+   */
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
   /**
    * Enables drag-to-move and edge-resize along the time axis: long-press a bar to
    * move it, or drag its right edge to resize. Called with the 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;
+  /**
+   * Long-press empty lane space. When `onCreateEvent` is also set, the long-press
+   * starts the create drag instead, so this fires only without it.
+   */
+  onLongPressCell?: (at: Date, resource: Resource) => void;
+  /**
+   * Long-press empty lane space, then drag along the time axis to sweep out a new
+   * event; 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;
 }
 
 const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
 
-function DefaultBar<T>({ event, width }: ResourceEventArgs<T>): ReactElement {
+// Hour-gutter width in the vertical orientation, matching the time grid's axis.
+const GUTTER_WIDTH = 56;
+
+function DefaultBar<T>({ event, width, height }: ResourceEventArgs<T>): ReactElement {
   const theme = useCalendarTheme();
+  // Show the time line only when the bar has room for it along its long axis.
+  const showTime = height != null ? height > 34 : width > 56;
   const time = eventTimeLabel({
     mode: "day",
     isAllDay: false,
@@ -97,7 +154,7 @@ function DefaultBar<T>({ event, width }: ResourceEventArgs<T>): ReactElement {
       >
         {event.title}
       </Text>
-      {time && width > 56 ? (
+      {time && showTime ? (
         <Text
           numberOfLines={1}
           style={[styles.barTime, { color: theme.colors.eventText }]}
@@ -112,29 +169,44 @@ function DefaultBar<T>({ event, width }: ResourceEventArgs<T>): ReactElement {
 
 type ResourceBarProps<T> = {
   pe: PositionedEvent<T>;
-  left: number;
-  width: number;
-  laneHeight: number;
-  hourWidth: number;
+  /** Time flows down instead of across; gestures and resize follow. */
+  vertical: boolean;
+  /** Pixels per hour along the time axis. */
+  hourSize: number;
+  /** Cross-axis lane offset: px when horizontal, a percent string when vertical. */
+  left: number | `${number}%`;
+  top: number;
+  /** Along-axis size when horizontal (px); lane width (percent) when vertical. */
+  width: number | `${number}%`;
+  /** Lane height when horizontal; along-axis size when vertical (px). */
+  height: number;
+  /** What the custom renderer is told about the bar's box. */
+  rendererSize: { width: number; height?: number };
   snapMinutes: number;
   Renderer: ComponentType<ResourceEventArgs<T>>;
   onPress: () => void;
+  onLongPress?: () => void;
   onDragEvent: (event: CalendarEvent<T>, start: Date, end: Date) => void | boolean;
   theme: ReturnType<typeof useCalendarTheme>;
 };
 
-// A bar with drag-to-move (long-press) and right-edge resize along the time axis.
-// The pure snap/commit math is shared with the time grid (`snapDeltaMinutes`,
-// `resolveDraggedBounds`); this only wires the horizontal gestures.
+// A bar with drag-to-move (long-press) and edge resize along the time axis
+// (right edge when horizontal, bottom edge when vertical). The pure snap/commit
+// math is shared with the time grid (`snapDeltaMinutes`, `resolveDraggedBounds`);
+// this only wires the gestures.
 function ResourceBar<T>({
   pe,
+  vertical,
+  hourSize,
   left,
+  top,
   width,
-  laneHeight,
-  hourWidth,
+  height,
+  rendererSize,
   snapMinutes,
   Renderer,
   onPress,
+  onLongPress,
   onDragEvent,
   theme,
 }: ResourceBarProps<T>): ReactElement {
@@ -174,9 +246,50 @@ function ResourceBar<T>({
     [snapMinutes, snapBack],
   );
 
+  // Dragging is gesture-only, so mirror move AND resize as screen-reader actions on
+  // the same `commit` path. They all live on the bar's accessible Pressable (the
+  // resize grip is a non-focusable visual/gesture affordance, so an `adjustable`
+  // role there would never receive focus on a real device).
+  const unit = (n: number) => `${n} minute${n === 1 ? "" : "s"}`;
+  const barActions = draggable
+    ? [
+        { name: "move-later", label: `Move ${unit(snapMinutes)} later` },
+        { name: "move-earlier", label: `Move ${unit(snapMinutes)} earlier` },
+        { name: "extend", label: `Extend by ${unit(snapMinutes)}` },
+        { name: "shrink", label: `Shorten by ${unit(snapMinutes)}` },
+      ]
+    : undefined;
+  const onBarAction = draggable
+    ? (e: AccessibilityActionEvent) => {
+        switch (e.nativeEvent.actionName) {
+          case "move-later":
+            commit(snapMinutes, snapMinutes);
+            break;
+          case "move-earlier":
+            commit(-snapMinutes, -snapMinutes);
+            break;
+          case "extend":
+            commit(0, snapMinutes);
+            break;
+          case "shrink":
+            commit(0, -snapMinutes);
+            break;
+        }
+      }
+    : undefined;
+
   const barStyle = useAnimatedStyle(
-    () => ({ transform: [{ translateX: moveX.value }], width: Math.max(width + resizeW.value, 2) }),
-    [width],
+    () =>
+      vertical
+        ? {
+            transform: [{ translateY: moveX.value }],
+            height: Math.max(height + resizeW.value, 2),
+          }
+        : {
+            transform: [{ translateX: moveX.value }],
+            width: Math.max((width as number) + resizeW.value, 2),
+          },
+    [vertical, width, height],
   );
 
   const moveGesture = useMemo(
@@ -185,18 +298,19 @@ function ResourceBar<T>({
         .enabled(draggable)
         .activateAfterLongPress(MOVE_ACTIVATE_MS)
         .onUpdate((e) => {
-          moveX.value = e.translationX;
+          moveX.value = vertical ? e.translationY : e.translationX;
         })
         .onEnd((e) => {
-          const delta = snapDeltaMinutes(e.translationX, hourWidth, snapMinutes);
+          const translation = vertical ? e.translationY : e.translationX;
+          const delta = snapDeltaMinutes(translation, hourSize, snapMinutes);
           if (delta === 0) {
             moveX.value = 0;
             return;
           }
-          moveX.value = (delta / MINUTES_PER_HOUR) * hourWidth;
+          moveX.value = (delta / MINUTES_PER_HOUR) * hourSize;
           runOnJS(commit)(delta, delta);
         }),
-    [draggable, hourWidth, snapMinutes, moveX, commit],
+    [draggable, vertical, hourSize, snapMinutes, moveX, commit],
   );
 
   const resizeGesture = useMemo(
@@ -204,48 +318,231 @@ function ResourceBar<T>({
       Gesture.Pan()
         .enabled(draggable)
         .onUpdate((e) => {
-          resizeW.value = e.translationX;
+          resizeW.value = vertical ? e.translationY : e.translationX;
         })
         .onEnd((e) => {
-          const delta = snapDeltaMinutes(e.translationX, hourWidth, snapMinutes);
+          const translation = vertical ? e.translationY : e.translationX;
+          const delta = snapDeltaMinutes(translation, hourSize, snapMinutes);
           if (delta === 0) {
             resizeW.value = 0;
             return;
           }
-          resizeW.value = (delta / MINUTES_PER_HOUR) * hourWidth;
+          resizeW.value = (delta / MINUTES_PER_HOUR) * hourSize;
           runOnJS(commit)(0, delta);
         }),
-    [draggable, hourWidth, snapMinutes, resizeW, commit],
+    [draggable, vertical, hourSize, snapMinutes, resizeW, commit],
   );
 
   return (
     <Animated.View
       style={[
-        { position: "absolute", left, top: pe.column * laneHeight, height: laneHeight, padding: 1 },
+        { position: "absolute", left, top, padding: 1 },
+        vertical ? { width } : { height },
         barStyle,
       ]}
     >
       <GestureDetector gesture={moveGesture}>
         <Pressable
           onPress={onPress}
+          // When the bar is draggable, the move gesture claims the long-press
+          // first; this fires only for non-draggable (disabled) bars.
+          onLongPress={onLongPress}
           accessibilityRole="button"
           accessibilityLabel={pe.event.title}
+          accessibilityActions={barActions}
+          onAccessibilityAction={onBarAction}
           style={styles.fill}
         >
-          <Renderer event={pe.event} width={width} onPress={onPress} />
+          <Renderer
+            event={pe.event}
+            width={rendererSize.width}
+            height={rendererSize.height}
+            onPress={onPress}
+          />
         </Pressable>
       </GestureDetector>
       <GestureDetector gesture={resizeGesture}>
+        {/* Visual + gesture resize affordance only; screen readers use the bar's
+            extend/shorten actions above (a non-focusable View can't hold them). */}
         <View
-          style={[styles.resizeGrip, { backgroundColor: theme.colors.eventText }]}
-          accessibilityRole="adjustable"
-          accessibilityLabel={`Resize ${pe.event.title}`}
+          testID="resource-resize-grip"
+          style={[
+            vertical ? styles.resizeGripBottom : styles.resizeGrip,
+            { backgroundColor: theme.colors.eventText },
+          ]}
+          accessibilityElementsHidden
+          importantForAccessibility="no"
         />
       </GestureDetector>
     </Animated.View>
   );
 }
 
+type LaneInteractionLayerProps = {
+  resource: Resource;
+  /** Time flows down instead of across. */
+  vertical: boolean;
+  /** Pixels per hour along the time axis. */
+  hourSize: number;
+  startHour: number;
+  date: Date;
+  snapMinutes: number;
+  onPressCell?: (at: Date, resource: Resource) => void;
+  onLongPressCell?: (at: Date, resource: Resource) => void;
+  onCreateEvent?: (start: Date, end: Date, resource: Resource) => void;
+  theme: ReturnType<typeof useCalendarTheme>;
+};
+
+// The tap/long-press/create surface behind a lane's bars, mirroring the time
+// grid's cell layer: taps snap to `snapMinutes`, and (when `onCreateEvent` is
+// set) a long-press starts a drag that sweeps out a ghost along the time axis.
+// Hidden from screen readers — it's a pointer convenience, not the accessible
+// path.
+function LaneInteractionLayer({
+  resource,
+  vertical,
+  hourSize,
+  startHour,
+  date,
+  snapMinutes,
+  onPressCell,
+  onLongPressCell,
+  onCreateEvent,
+  theme,
+}: LaneInteractionLayerProps): ReactElement {
+  const ghostStart = useSharedValue(0);
+  const ghostSize = useSharedValue(0);
+  const ghostVisible = useSharedValue(0);
+
+  const timeAt = useCallback(
+    (px: number) => cellRangeFromDrag(date, px, px, hourSize, startHour, snapMinutes)?.start,
+    [date, hourSize, startHour, snapMinutes],
+  );
+  const commitCreate = useCallback(
+    (fromPx: number, toPx: number) => {
+      const range = cellRangeFromDrag(date, fromPx, toPx, hourSize, startHour, snapMinutes);
+      if (range) onCreateEvent?.(range.start, range.end, resource);
+    },
+    [date, hourSize, startHour, snapMinutes, onCreateEvent, resource],
+  );
+
+  const pressAt = useCallback(
+    (px: number) => {
+      const at = timeAt(px);
+      if (at) onPressCell?.(at, resource);
+    },
+    [timeAt, onPressCell, resource],
+  );
+
+  // Web: a GestureDetector swallows the Pressable's presses on react-native-web,
+  // so taps come back through a Tap gesture, and the create sweep activates past
+  // a small drag instead of a long-press so a plain mouse drag creates. Both
+  // mirror the time grid's cell layer.
+  const laneGesture = useMemo(() => {
+    const pan = onCreateEvent
+      ? Gesture.Pan()
+          .onStart((e) => {
+            ghostStart.value = vertical ? e.y : e.x;
+            ghostSize.value = 0;
+            ghostVisible.value = 1;
+          })
+          .onUpdate((e) => {
+            ghostSize.value = (vertical ? e.y : e.x) - ghostStart.value;
+          })
+          // `success` is false when the gesture is cancelled/failed after it
+          // activated (RNGH still calls onEnd); only a real end should create.
+          .onEnd((e, success) => {
+            ghostVisible.value = 0;
+            if (success) runOnJS(commitCreate)(ghostStart.value, vertical ? e.y : e.x);
+          })
+          .onFinalize(() => {
+            ghostVisible.value = 0;
+          })
+      : null;
+    const activatedPan = pan
+      ? isWeb
+        ? vertical
+          ? pan.activeOffsetY([-DRAG_ACTIVATE_PX, DRAG_ACTIVATE_PX])
+          : pan.activeOffsetX([-DRAG_ACTIVATE_PX, DRAG_ACTIVATE_PX])
+        : pan.activateAfterLongPress(MOVE_ACTIVATE_MS)
+      : null;
+    const tap =
+      isWeb && onPressCell
+        ? Gesture.Tap().onEnd((e) => {
+            runOnJS(pressAt)(vertical ? e.y : e.x);
+          })
+        : null;
+    if (activatedPan && tap) return Gesture.Exclusive(activatedPan, tap);
+    return activatedPan ?? tap;
+  }, [
+    onCreateEvent,
+    onPressCell,
+    vertical,
+    commitCreate,
+    pressAt,
+    ghostStart,
+    ghostSize,
+    ghostVisible,
+  ]);
+
+  const ghostStyle = useAnimatedStyle(() => {
+    // Snap the preview to the same grid the commit resolves to, so what you see
+    // is what cellRangeFromDrag will create.
+    const stepPx = (snapMinutes / MINUTES_PER_HOUR) * hourSize;
+    const snap = (v: number) => (stepPx > 0 ? Math.round(v / stepPx) * stepPx : v);
+    const a = snap(ghostStart.value);
+    const b = snap(ghostStart.value + ghostSize.value);
+    const from = Math.min(a, b);
+    const size = Math.max(Math.abs(b - a), 2);
+    return vertical
+      ? { opacity: ghostVisible.value, top: from, height: size }
+      : { opacity: ghostVisible.value, left: from, width: size };
+  }, [vertical, hourSize, snapMinutes]);
+
+  const pxOf = (e: GestureResponderEvent) =>
+    vertical ? e.nativeEvent.locationY : e.nativeEvent.locationX;
+  const handlePress = onPressCell ? (e: GestureResponderEvent) => pressAt(pxOf(e)) : undefined;
+  // When create is on, a long-press starts the create drag, so don't also fire
+  // the consumer's long-press handler (mirrors the time grid).
+  const handleLongPress =
+    onLongPressCell && !onCreateEvent
+      ? (e: GestureResponderEvent) => {
+          const at = timeAt(pxOf(e));
+          if (at) onLongPressCell(at, resource);
+        }
+      : undefined;
+
+  const layer = (
+    <Pressable
+      testID="resource-cell-layer"
+      style={StyleSheet.absoluteFill}
+      onPress={handlePress}
+      onLongPress={handleLongPress}
+      accessibilityElementsHidden
+      importantForAccessibility="no"
+    />
+  );
+  return (
+    <>
+      {laneGesture ? <GestureDetector gesture={laneGesture}>{layer}</GestureDetector> : layer}
+      {onCreateEvent ? (
+        <Animated.View
+          testID="resource-create-ghost"
+          pointerEvents="none"
+          style={[
+            vertical ? styles.vcreateGhost : styles.hcreateGhost,
+            {
+              backgroundColor: theme.colors.eventBackground,
+              borderColor: theme.colors.todayBackground,
+            },
+            ghostStyle,
+          ]}
+        />
+      ) : null}
+    </>
+  );
+}
+
 /**
  * A horizontal resource timeline: rows are resources (rooms, people, machines)
  * and the x-axis is one day's hours. Events sit in their resource's row, and
@@ -266,22 +563,35 @@ function ResourceBar<T>({
  */
 export function ResourceTimeline<T = unknown>({
   date,
+  orientation = "horizontal",
   resources,
   events,
   resourceId = (event) => (event as { resourceId?: string }).resourceId,
   startHour = 0,
   endHour = 24,
   hourWidth = 80,
+  hourHeight = 48,
   rowHeight = 56,
   labelWidth = 140,
   ampm = false,
   renderEvent,
   onPressEvent,
+  onLongPressEvent,
   onDragEvent,
+  onPressCell,
+  onLongPressCell,
+  onCreateEvent,
+  businessHours,
   dragStepMinutes = 15,
 }: ResourceTimelineProps<T>): ReactElement {
   const theme = useCalendarTheme();
   const Renderer = renderEvent ?? DefaultBar;
+  const cellEnabled = !!onPressCell || !!onLongPressCell || !!onCreateEvent;
+  // 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),
@@ -299,6 +609,159 @@ export function ResourceTimeline<T = unknown>({
     return map;
   }, [resources, events, resourceId, date]);
 
+  if (orientation === "vertical") {
+    // Time flows down like the time grid: hour gutter on the left and one
+    // flexed column per resource, so narrow screens share the width instead of
+    // scrolling sideways. The resource headers stay fixed above the scroll.
+    const trackHeight = (endHour - startHour) * hourHeight;
+    return (
+      <View style={styles.vroot}>
+        <View style={[styles.header, { borderBottomColor: theme.colors.gridLine }]}>
+          <View style={{ width: GUTTER_WIDTH }} />
+          {resources.map((resource) => (
+            <View key={resource.id} style={[styles.vheaderCell, theme.containers.resourceLabel]}>
+              <Text
+                numberOfLines={1}
+                style={[styles.vheaderText, { color: theme.colors.text }]}
+                allowFontScaling={false}
+              >
+                {resource.title ?? resource.id}
+              </Text>
+            </View>
+          ))}
+        </View>
+        <ScrollView showsVerticalScrollIndicator>
+          <View style={[styles.vbody, { height: trackHeight }]}>
+            <View style={{ width: GUTTER_WIDTH }}>
+              {hours.map((h) => (
+                <Text
+                  key={h}
+                  allowFontScaling={false}
+                  style={[
+                    styles.vhourLabel,
+                    {
+                      top: Math.max(0, (h - startHour) * hourHeight - 6),
+                      color: theme.colors.textMuted,
+                    },
+                  ]}
+                >
+                  {formatHour(h, { ampm })}
+                </Text>
+              ))}
+            </View>
+            {resources.map((resource) => {
+              const positioned = byResource.get(resource.id) ?? [];
+              return (
+                <View
+                  key={resource.id}
+                  style={[
+                    styles.vcolumn,
+                    { borderLeftColor: theme.colors.gridLine },
+                    theme.containers.resourceRow,
+                  ]}
+                >
+                  {/* Closed-hours shade, behind the grid lines and bars. */}
+                  {bandsFor(resource).map((b) => (
+                    <View
+                      key={`shade-${b.start}`}
+                      pointerEvents="none"
+                      testID="resource-hours-shade"
+                      style={[
+                        styles.vshadeBand,
+                        {
+                          top: (b.start - startHour) * hourHeight,
+                          height: (b.end - b.start) * hourHeight,
+                          backgroundColor: theme.colors.outsideHoursBackground,
+                        },
+                      ]}
+                    />
+                  ))}
+                  {hours.slice(1).map((h) => (
+                    <View
+                      key={h}
+                      pointerEvents="none"
+                      style={[
+                        styles.vgridLine,
+                        {
+                          top: (h - startHour) * hourHeight,
+                          backgroundColor: theme.colors.gridLine,
+                        },
+                      ]}
+                    />
+                  ))}
+                  {cellEnabled ? (
+                    <LaneInteractionLayer
+                      resource={resource}
+                      vertical
+                      hourSize={hourHeight}
+                      startHour={startHour}
+                      date={date}
+                      snapMinutes={dragStepMinutes}
+                      onPressCell={onPressCell}
+                      onLongPressCell={onLongPressCell}
+                      onCreateEvent={onCreateEvent}
+                      theme={theme}
+                    />
+                  ) : null}
+                  {positioned.map((pe, idx) => {
+                    const top =
+                      clamp(pe.startHours - startHour, 0, endHour - startHour) * hourHeight;
+                    const bottomPx =
+                      clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) *
+                      hourHeight;
+                    const height = Math.max(bottomPx - top, 2);
+                    // Overlapping events share the column as side-by-side sub-lanes.
+                    const lanePct = 100 / pe.columns;
+                    const left = `${pe.column * lanePct}%` as const;
+                    const width = `${lanePct}%` as const;
+                    const onPress = () => onPressEvent?.(pe.event);
+                    if (onDragEvent) {
+                      return (
+                        <ResourceBar
+                          key={idx}
+                          pe={pe}
+                          vertical
+                          hourSize={hourHeight}
+                          left={left}
+                          top={top}
+                          width={width}
+                          height={height}
+                          rendererSize={{ width: 0, height }}
+                          snapMinutes={dragStepMinutes}
+                          Renderer={Renderer}
+                          onPress={onPress}
+                          onLongPress={
+                            onLongPressEvent ? () => onLongPressEvent(pe.event) : undefined
+                          }
+                          onDragEvent={onDragEvent}
+                          theme={theme}
+                        />
+                      );
+                    }
+                    return (
+                      <Pressable
+                        key={idx}
+                        onPress={onPress}
+                        onLongPress={
+                          onLongPressEvent ? () => onLongPressEvent(pe.event) : undefined
+                        }
+                        accessibilityRole="button"
+                        accessibilityLabel={pe.event.title}
+                        style={{ position: "absolute", left, width, top, height, padding: 1 }}
+                      >
+                        <Renderer event={pe.event} width={0} height={height} onPress={onPress} />
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    );
+  }
+
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator style={styles.root}>
       <View style={{ width: labelWidth + trackWidth }}>
@@ -349,6 +812,22 @@ export function ResourceTimeline<T = unknown>({
                 </Text>
               </View>
               <View style={{ width: trackWidth }}>
+                {/* Closed-hours shade, behind the grid lines and bars. */}
+                {bandsFor(resource).map((b) => (
+                  <View
+                    key={`shade-${b.start}`}
+                    pointerEvents="none"
+                    testID="resource-hours-shade"
+                    style={[
+                      styles.hshadeBand,
+                      {
+                        left: (b.start - startHour) * hourWidth,
+                        width: (b.end - b.start) * hourWidth,
+                        backgroundColor: theme.colors.outsideHoursBackground,
+                      },
+                    ]}
+                  />
+                ))}
                 {/* Hour grid lines */}
                 {hours.slice(1).map((h) => (
                   <View
@@ -360,6 +839,20 @@ export function ResourceTimeline<T = unknown>({
                     ]}
                   />
                 ))}
+                {cellEnabled ? (
+                  <LaneInteractionLayer
+                    resource={resource}
+                    vertical={false}
+                    hourSize={hourWidth}
+                    startHour={startHour}
+                    date={date}
+                    snapMinutes={dragStepMinutes}
+                    onPressCell={onPressCell}
+                    onLongPressCell={onLongPressCell}
+                    onCreateEvent={onCreateEvent}
+                    theme={theme}
+                  />
+                ) : null}
                 {positioned.map((pe, idx) => {
                   const left = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourWidth;
                   const right =
@@ -374,13 +867,19 @@ export function ResourceTimeline<T = unknown>({
                       <ResourceBar
                         key={idx}
                         pe={pe}
+                        vertical={false}
+                        hourSize={hourWidth}
                         left={left}
+                        top={pe.column * laneHeight}
                         width={width}
-                        laneHeight={laneHeight}
-                        hourWidth={hourWidth}
+                        height={laneHeight}
+                        rendererSize={{ width }}
                         snapMinutes={dragStepMinutes}
                         Renderer={Renderer}
                         onPress={onPress}
+                        onLongPress={
+                          onLongPressEvent ? () => onLongPressEvent(pe.event) : undefined
+                        }
                         onDragEvent={onDragEvent}
                         theme={theme}
                       />
@@ -390,6 +889,7 @@ export function ResourceTimeline<T = unknown>({
                     <Pressable
                       key={idx}
                       onPress={onPress}
+                      onLongPress={onLongPressEvent ? () => onLongPressEvent(pe.event) : undefined}
                       accessibilityRole="button"
                       accessibilityLabel={pe.event.title}
                       style={{
@@ -438,4 +938,50 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     opacity: 0.5,
   },
+  // Its bottom-edge counterpart in the vertical orientation.
+  resizeGripBottom: {
+    position: "absolute",
+    bottom: 1,
+    left: "30%",
+    right: "30%",
+    height: 4,
+    borderRadius: 2,
+    opacity: 0.5,
+  },
+  vroot: { flex: 1 },
+  vheaderCell: {
+    flex: 1,
+    paddingVertical: 6,
+    paddingHorizontal: 4,
+    alignItems: "center",
+    borderLeftWidth: StyleSheet.hairlineWidth,
+  },
+  vheaderText: { fontSize: 13, fontWeight: "600" },
+  vbody: { flexDirection: "row" },
+  vcolumn: { flex: 1, borderLeftWidth: StyleSheet.hairlineWidth },
+  vhourLabel: { position: "absolute", right: 6, fontSize: 10 },
+  vgridLine: { position: "absolute", left: 0, right: 0, height: StyleSheet.hairlineWidth },
+  // The drag-to-create preview, sized along the time axis by the gesture. It
+  // sits above the bars (like the dom renderer and the time grid) so the sweep
+  // stays visible when it crosses an existing event.
+  vcreateGhost: {
+    position: "absolute",
+    left: 2,
+    right: 2,
+    borderWidth: 1,
+    borderRadius: 6,
+    opacity: 0,
+    zIndex: 2,
+  },
+  hcreateGhost: {
+    position: "absolute",
+    top: 2,
+    bottom: 2,
+    borderWidth: 1,
+    borderRadius: 6,
+    opacity: 0,
+    zIndex: 2,
+  },
+  hshadeBand: { position: "absolute", top: 0, bottom: 0 },
+  vshadeBand: { position: "absolute", left: 0, right: 0 },
 });