@super-calendar/dom 2.3.1 → 2.4.0

package/dist/index.js

@@ -728,9 +728,20 @@ function MonthView({ date, weekStartsOn = 0, weekdayFormat = "short", events, ev
 }
 //#endregion
 //#region src/TimeGrid.tsx
-const HOURS = Array.from({ length: 24 }, (_, h) => h);
-const GUTTER_WIDTH = 56;
+const GUTTER_WIDTH$1 = 56;
 const clamp$1 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const VISUALLY_HIDDEN = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+};
 const DOM_TITLE_LINE_HEIGHT = 16;
 const DOM_TIME_LINE_HEIGHT = 30;
 const DOM_BOX_PADDING_V = 2;
@@ -801,6 +812,17 @@ function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme
 		}) : null]
 	});
 }
+const NOW_TICK_MS = 6e4;
+function useNow(enabled) {
+	const [now, setNow] = (0, react.useState)(() => /* @__PURE__ */ new Date());
+	(0, react.useEffect)(() => {
+		if (!enabled) return;
+		setNow(/* @__PURE__ */ new Date());
+		const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), NOW_TICK_MS);
+		return () => clearInterval(id);
+	}, [enabled]);
+	return now;
+}
 /**
 * A day / week / N-day time grid rendered with plain DOM elements. Events are
 * positioned with the library's pure `layoutDayEvents`, so overlap columns and
@@ -812,7 +834,7 @@ function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme
 * <TimeGrid mode="week" date={new Date()} events={events} />
 * ```
 */
-function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, weekdayFormat = "short", hourHeight: initialHourHeight = 48, scrollOffsetMinutes = 480, zoomable = true, minHourHeight = 24, maxHourHeight = 160, dragStepMinutes = 15, ampm = false, timeslots = 1, businessHours, showNowIndicator = true, showAllDayEventCell = true, locale, theme: themeOverrides, height = 600, renderEvent, eventAccessibilityLabel, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style, classNames, styles }) {
+function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, weekdayFormat = "short", hourHeight: initialHourHeight = 48, scrollOffsetMinutes = 480, zoomable = true, minHourHeight = 24, maxHourHeight = 160, dragStepMinutes = 15, ampm = false, timeslots = 1, minHour = 0, maxHour = 24, hideHours = false, showWeekNumber = false, weekNumberPrefix = "W", keyboardEventNavigation = false, businessHours, showNowIndicator = true, showAllDayEventCell = true, locale, theme: themeOverrides, height = 600, renderEvent, eventAccessibilityLabel, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
 	const slot = createSlots({
 		classNames,
@@ -821,6 +843,12 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 	const scrollRef = (0, react.useRef)(null);
 	const dfns = locale ? { locale } : void 0;
 	const snapHours = dragStepMinutes / 60;
+	const windowStart = Math.max(0, Math.min(minHour, 23));
+	const windowEnd = Math.max(windowStart + 1, Math.min(maxHour, 24));
+	const windowHours = windowEnd - windowStart;
+	const gutterWidth = hideHours ? 0 : GUTTER_WIDTH$1;
+	const visibleHours = (0, react.useMemo)(() => Array.from({ length: windowHours }, (_, i) => windowStart + i), [windowStart, windowHours]);
+	const now = useNow(showNowIndicator);
 	const [hourHeight, setHourHeight] = (0, react.useState)(initialHourHeight);
 	(0, react.useEffect)(() => setHourHeight(initialHourHeight), [initialHourHeight]);
 	const hourHeightRef = (0, react.useRef)(hourHeight);
@@ -848,8 +876,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 	}), [days, events]);
 	const hasAllDay = allDayByDay.some((list) => list.length > 0);
 	(0, react.useEffect)(() => {
-		if (scrollRef.current) scrollRef.current.scrollTop = scrollOffsetMinutes / 60 * hourHeightRef.current;
-	}, [scrollOffsetMinutes]);
+		if (scrollRef.current) scrollRef.current.scrollTop = Math.max(0, (scrollOffsetMinutes / 60 - windowStart) * hourHeightRef.current);
+	}, [scrollOffsetMinutes, windowStart]);
 	(0, react.useEffect)(() => {
 		const el = scrollRef.current;
 		if (!el || !zoomable) return;
@@ -892,23 +920,30 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		if (pinch.current.size < 2) pinchBase.current = null;
 	};
 	const Renderer = renderEvent;
-	const totalHeight = 24 * hourHeight;
-	const beginDrag = (e, event, key, kind, startHours, durationHours) => {
+	const totalHeight = windowHours * hourHeight;
+	const beginDrag = (e, event, key, kind, startHours, durationHours, dayIndex) => {
 		if (!onDragEvent) return;
 		e.stopPropagation();
 		try {
 			e.target.setPointerCapture?.(e.pointerId);
 		} catch {}
+		const column = kind === "move" ? e.currentTarget.parentElement : null;
+		const dayWidth = column ? column.getBoundingClientRect().width : 0;
 		dragOrigin.current = {
+			pointerX: e.clientX,
 			pointerY: e.clientY,
 			startHours,
-			durationHours
+			durationHours,
+			dayIndex,
+			dayWidth
 		};
 		applyDrag({
 			key,
 			kind,
 			startHours,
 			durationHours,
+			dayDelta: 0,
+			dayOffsetPx: 0,
 			moved: false
 		});
 		onDragStart?.(event);
@@ -923,14 +958,19 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		const dHours = (e.clientY - dragOrigin.current.pointerY) / hourHeightRef.current;
 		const snap = (v) => Math.round(v / snapHours) * snapHours;
 		if (d.kind === "move") {
-			const startHours = clamp$1(snap(dragOrigin.current.startHours + dHours), 0, 24 - d.durationHours);
+			const startHours = clamp$1(snap(dragOrigin.current.startHours + dHours), windowStart, Math.max(windowStart, windowEnd - d.durationHours));
+			const o = dragOrigin.current;
+			const rawDayDelta = o.dayWidth > 0 ? Math.round((e.clientX - o.pointerX) / o.dayWidth) : 0;
+			const dayDelta = clamp$1(o.dayIndex + rawDayDelta, 0, days.length - 1) - o.dayIndex;
 			applyDrag({
 				...d,
 				startHours,
+				dayDelta,
+				dayOffsetPx: dayDelta * o.dayWidth,
 				moved: true
 			});
 		} else {
-			const durationHours = clamp$1(snap(dragOrigin.current.durationHours + dHours), snapHours, 24 - d.startHours);
+			const durationHours = clamp$1(snap(dragOrigin.current.durationHours + dHours), snapHours, Math.max(snapHours, windowEnd - d.startHours));
 			applyDrag({
 				...d,
 				durationHours,
@@ -949,7 +989,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 			onPress();
 			return;
 		}
-		const base = (0, date_fns.startOfDay)(day);
+		const base = (0, date_fns.startOfDay)((0, date_fns.addDays)(day, d.dayDelta));
 		const start = (0, date_fns.addMinutes)(base, Math.round(d.startHours * 60));
 		const end = (0, date_fns.addMinutes)(base, Math.round((d.startHours + d.durationHours) * 60));
 		onDragEvent?.(event, start, end);
@@ -997,10 +1037,10 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		const moved = Math.abs(endPx - o.startPx) > 4;
 		const h = hourHeightRef.current;
 		if (moved && onCreateEvent) {
-			const range = (0, _super_calendar_core.cellRangeFromDrag)(day, o.startPx, endPx, h, 0, dragStepMinutes);
+			const range = (0, _super_calendar_core.cellRangeFromDrag)(day, o.startPx, endPx, h, windowStart, dragStepMinutes);
 			if (range) onCreateEvent(range.start, range.end);
 		} else if (onPressCell) {
-			const at = (0, _super_calendar_core.cellRangeFromDrag)(day, o.startPx, o.startPx, h, 0, dragStepMinutes);
+			const at = (0, _super_calendar_core.cellRangeFromDrag)(day, o.startPx, o.startPx, h, windowStart, dragStepMinutes);
 			if (at) onPressCell(at.start);
 		}
 		createOrigin.current = null;
@@ -1011,7 +1051,72 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		setCreateBox(null);
 	};
 	const positionedByDay = (0, react.useMemo)(() => days.map((day) => (0, _super_calendar_core.layoutDayEvents)(events, day)), [days, events]);
-	const bandsByDay = (0, react.useMemo)(() => days.map((day) => (0, _super_calendar_core.closedHourBands)(day, businessHours)), [days, businessHours]);
+	const navByDay = (0, react.useMemo)(() => positionedByDay.map((list, day) => list.map((pe, idx) => ({
+		key: `${day}:${idx}`,
+		start: pe.startHours,
+		dur: pe.durationHours
+	})).filter((n) => !(n.start >= windowEnd || n.start + n.dur <= windowStart)).sort((a, b) => a.start - b.start)), [
+		positionedByDay,
+		windowStart,
+		windowEnd
+	]);
+	const nextEventKey = (currentKey, arrowKey) => {
+		let day = -1;
+		let pos = -1;
+		for (let d = 0; d < navByDay.length; d++) {
+			const p = navByDay[d].findIndex((n) => n.key === currentKey);
+			if (p !== -1) {
+				day = d;
+				pos = p;
+				break;
+			}
+		}
+		if (day === -1) return null;
+		const start = navByDay[day][pos].start;
+		const nearestInDay = (d) => {
+			let best = null;
+			let bestDiff = Number.POSITIVE_INFINITY;
+			for (const n of navByDay[d]) {
+				const diff = Math.abs(n.start - start);
+				if (diff < bestDiff) {
+					bestDiff = diff;
+					best = n.key;
+				}
+			}
+			return best;
+		};
+		switch (arrowKey) {
+			case "ArrowDown": return navByDay[day][Math.min(pos + 1, navByDay[day].length - 1)].key;
+			case "ArrowUp": return navByDay[day][Math.max(pos - 1, 0)].key;
+			case "ArrowRight":
+				for (let d = day + 1; d < navByDay.length; d++) {
+					const k = nearestInDay(d);
+					if (k) return k;
+				}
+				return null;
+			case "ArrowLeft":
+				for (let d = day - 1; d >= 0; d--) {
+					const k = nearestInDay(d);
+					if (k) return k;
+				}
+				return null;
+			case "Home": return navByDay[day][0].key;
+			case "End": return navByDay[day][navByDay[day].length - 1].key;
+			default: return null;
+		}
+	};
+	const onEventKeyDown = (currentKey, e) => {
+		const next = nextEventKey(currentKey, e.key);
+		if (!next) return;
+		e.preventDefault();
+		scrollRef.current?.querySelector(`[data-event-key="${next}"]`)?.focus();
+	};
+	const bandsByDay = (0, react.useMemo)(() => days.map((day) => (0, _super_calendar_core.closedHourBands)(day, businessHours, windowStart, windowEnd)), [
+		days,
+		businessHours,
+		windowStart,
+		windowEnd
+	]);
 	const gridLines = (0, react.useMemo)(() => {
 		const hourLines = `repeating-linear-gradient(to bottom, transparent 0, transparent ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight}px)`;
 		if (timeslots <= 1) return hourLines;
@@ -1037,41 +1142,57 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 					base: { display: "flex" },
 					themed: { borderBottom: `1px solid ${theme.gridLine}` }
 				}),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-					width: GUTTER_WIDTH,
-					flex: "none"
-				} }), days.map((day) => {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...slot("weekNumber", {
+						base: {
+							width: gutterWidth,
+							flex: "none",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							overflow: "hidden"
+						},
+						themed: {
+							fontSize: 10,
+							color: theme.textMuted
+						}
+					}),
+					children: showWeekNumber && gutterWidth > 0 && days[0] ? `${weekNumberPrefix}${(0, date_fns.getISOWeek)(days.find((d) => d.getDay() === 4) ?? days[0])}` : null
+				}), days.map((day) => {
 					const today = (0, _super_calendar_core.getIsToday)(day);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						tabIndex: onPressDateHeader ? 0 : -1,
-						"aria-hidden": onPressDateHeader ? void 0 : true,
-						onClick: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
-						...dataState({ "data-today": today }),
-						...slot("columnHeader", {
-							base: {
-								flex: 1,
-								border: "none",
-								background: "transparent",
-								font: "inherit",
-								cursor: onPressDateHeader ? "pointer" : "default",
-								display: "flex",
-								flexDirection: "column",
-								alignItems: "center",
-								gap: 2
-							},
-							themed: {
-								color: theme.textMuted,
-								padding: "6px 0"
-							}
+					const dateLabel = (0, date_fns.format)(day, "EEEE, d MMMM yyyy", dfns);
+					const headerProps = slot("columnHeader", {
+						base: {
+							flex: 1,
+							border: "none",
+							background: "transparent",
+							font: "inherit",
+							cursor: onPressDateHeader ? "pointer" : "default",
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							gap: 2
+						},
+						themed: {
+							color: theme.textMuted,
+							padding: "6px 0"
+						}
+					});
+					const inner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: VISUALLY_HIDDEN,
+							children: dateLabel
 						}),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
 							...slot("columnHeaderWeekday", { themed: {
 								fontSize: 11,
 								fontWeight: 600
 							} }),
 							children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), dfns)
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
 							...dataState({ "data-today": today }),
 							...slot("columnHeaderDate", {
 								base: {
@@ -1090,7 +1211,18 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 								}
 							}),
 							children: (0, date_fns.format)(day, "d", dfns)
-						})]
+						})
+					] });
+					return onPressDateHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPressDateHeader(day),
+						...dataState({ "data-today": today }),
+						...headerProps,
+						children: inner
+					}, day.toISOString()) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						...dataState({ "data-today": today }),
+						...headerProps,
+						children: inner
 					}, day.toISOString());
 				})]
 			}),
@@ -1102,8 +1234,10 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					...slot("allDayLabel", {
 						base: {
-							width: GUTTER_WIDTH,
+							width: gutterWidth,
 							flex: "none",
+							minWidth: 0,
+							overflow: "hidden",
 							textAlign: "right"
 						},
 						themed: {
@@ -1186,17 +1320,17 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 						height: totalHeight,
 						position: "relative"
 					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					children: [hideHours ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						...slot("hourGutter", { base: {
-							width: GUTTER_WIDTH,
+							width: gutterWidth,
 							flex: "none",
 							position: "relative"
 						} }),
-						children: HOURS.map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						children: visibleHours.map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							...slot("hourLabel", {
 								base: {
 									position: "absolute",
-									top: h * hourHeight - 6,
+									top: Math.max(0, (h - windowStart) * hourHeight - 6),
 									right: 6
 								},
 								themed: {
@@ -1208,9 +1342,9 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 						}, h))
 					}), days.map((day, dayIndex) => {
 						const positioned = positionedByDay[dayIndex];
-						const showNow = showNowIndicator && (0, _super_calendar_core.isSameCalendarDay)(day, /* @__PURE__ */ new Date());
-						const nowDate = /* @__PURE__ */ new Date();
-						const nowTop = (nowDate.getHours() * 60 + nowDate.getMinutes()) / 60 * hourHeight;
+						const nowHours = (now.getHours() * 60 + now.getMinutes()) / 60;
+						const showNow = showNowIndicator && (0, _super_calendar_core.isSameCalendarDay)(day, now) && nowHours >= windowStart && nowHours <= windowEnd;
+						const nowTop = (nowHours - windowStart) * hourHeight;
 						const bands = bandsByDay[dayIndex];
 						const ghost = createBox?.dayIndex === dayIndex ? createBox : null;
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1240,7 +1374,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											position: "absolute",
 											left: 0,
 											right: 0,
-											top: b.start * hourHeight,
+											top: (b.start - windowStart) * hourHeight,
 											height: (b.end - b.start) * hourHeight,
 											pointerEvents: "none",
 											zIndex: 0
@@ -1265,7 +1399,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 									const active = drag?.key === key ? drag : null;
 									const startHours = active ? active.startHours : pe.startHours;
 									const durationHours = active ? active.durationHours : pe.durationHours;
-									const top = startHours * hourHeight;
+									if (!active && (pe.startHours >= windowEnd || pe.startHours + pe.durationHours <= windowStart)) return null;
+									const top = (startHours - windowStart) * hourHeight;
 									const boxHeight = Math.max(durationHours * hourHeight, 14);
 									const widthPct = 100 / pe.columns;
 									const onPress = () => onPressEvent?.(pe.event);
@@ -1283,6 +1418,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										role: "button",
 										tabIndex: 0,
+										"data-event-key": keyboardEventNavigation ? key : void 0,
 										"aria-label": eventAccessibilityLabel ? eventAccessibilityLabel(pe.event, {
 											mode,
 											isAllDay: false,
@@ -1298,9 +1434,11 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											if (e.key === "Enter" || e.key === " ") {
 												e.preventDefault();
 												onPress();
+												return;
 											}
+											if (keyboardEventNavigation) onEventKeyDown(key, e);
 										},
-										onPointerDown: draggable ? (e) => beginDrag(e, pe.event, key, "move", pe.startHours, pe.durationHours) : void 0,
+										onPointerDown: draggable ? (e) => beginDrag(e, pe.event, key, "move", pe.startHours, pe.durationHours, dayIndex) : void 0,
 										onPointerMove: draggable ? moveDrag : void 0,
 										onPointerUp: draggable ? (e) => endDrag(e, day, pe.event, onPress) : void 0,
 										onPointerCancel: draggable ? cancelDrag : void 0,
@@ -1315,7 +1453,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											cursor: draggable ? "grab" : "pointer",
 											touchAction: draggable ? "none" : "auto",
 											zIndex: active ? 3 : 1,
-											opacity: active ? .85 : 1
+											opacity: active ? .85 : 1,
+											...active && active.dayOffsetPx !== 0 ? { transform: `translateX(${active.dayOffsetPx}px)` } : null
 										} }),
 										children: [Renderer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, { ...args }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultDomEvent, {
 											...args,
@@ -1324,7 +1463,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 										}), draggable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											onPointerDown: (e) => {
 												e.stopPropagation();
-												beginDrag(e, pe.event, key, "resize", pe.startHours, pe.durationHours);
+												beginDrag(e, pe.event, key, "resize", pe.startHours, pe.durationHours, dayIndex);
 											},
 											style: {
 												position: "absolute",
@@ -1391,6 +1530,18 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 }
 //#endregion
 //#region src/Calendar.tsx
+const EMPTY_EVENTS = [];
+function expansionRange(mode, date, weekStartsOn, numberOfDays) {
+	if (mode === "month") return [(0, date_fns.startOfWeek)((0, date_fns.startOfMonth)(date), { weekStartsOn }), (0, date_fns.endOfWeek)((0, date_fns.endOfMonth)(date), { weekStartsOn })];
+	if (mode === "schedule") return [(0, date_fns.startOfDay)(date), (0, date_fns.endOfDay)((0, date_fns.addMonths)(date, 3))];
+	const days = (0, _super_calendar_core.getViewDays)(mode, date, weekStartsOn, numberOfDays ?? 1);
+	return [(0, date_fns.startOfDay)(days[0]), (0, date_fns.endOfDay)(days[days.length - 1])];
+}
+function pageStep(mode, date, direction, weekStartsOn, numberOfDays) {
+	if (mode === "month") return (0, date_fns.addMonths)(date, direction);
+	if (mode === "schedule") return (0, date_fns.addDays)(date, direction * 7);
+	return (0, date_fns.addDays)(date, direction * (0, _super_calendar_core.getViewDays)(mode, date, weekStartsOn, numberOfDays ?? 1).length);
+}
 /**
 * Batteries-included entry point for the react-dom renderer: it picks the right
 * view for `mode`. `month` renders a single {@link MonthView}; `schedule` renders
@@ -1402,9 +1553,37 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 * <Calendar mode="week" date={new Date()} events={events} />
 * ```
 */
-function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays, locale, theme, height, className, style, onPressEvent, eventAccessibilityLabel, ampm, hourHeight, scrollOffsetMinutes, timeslots, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, maxVisibleEventCount, moreLabel, showAdjacentMonths, weekdayFormat, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent, classNames, styles }) {
-	if (mode === "schedule") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Agenda, {
-		events: events ?? [],
+function Calendar({ mode = "week", date, events, onChangeDate, weekStartsOn = 0, numberOfDays, locale, timeZone, theme, height, className, style, onPressEvent, eventAccessibilityLabel, ampm, hourHeight, scrollOffsetMinutes, timeslots, minHour, maxHour, hideHours, showWeekNumber, weekNumberPrefix, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, keyboardEventNavigation, maxVisibleEventCount, moreLabel, showAdjacentMonths, weekdayFormat, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent, classNames, styles }) {
+	const displayEvents = (0, react.useMemo)(() => {
+		let out = events ?? EMPTY_EVENTS;
+		if (out.some((e) => e.recurrence)) {
+			let [start, end] = expansionRange(mode, date, weekStartsOn, numberOfDays);
+			if (timeZone) {
+				start = (0, date_fns.addDays)(start, -1);
+				end = (0, date_fns.addDays)(end, 1);
+			}
+			out = (0, _super_calendar_core.expandRecurringEvents)(out, start, end);
+		}
+		if (timeZone) out = (0, _super_calendar_core.eventsInTimeZone)(out, timeZone);
+		return out;
+	}, [
+		events,
+		mode,
+		date.getTime(),
+		weekStartsOn,
+		numberOfDays,
+		timeZone
+	]);
+	const handlePageKeys = (e) => {
+		if (!onChangeDate) return;
+		if (e.key === "PageDown") onChangeDate(pageStep(mode, date, 1, weekStartsOn, numberOfDays));
+		else if (e.key === "PageUp") onChangeDate(pageStep(mode, date, -1, weekStartsOn, numberOfDays));
+		else return;
+		e.preventDefault();
+	};
+	let view;
+	if (mode === "schedule") view = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Agenda, {
+		events: displayEvents,
 		locale,
 		ampm,
 		theme,
@@ -1419,9 +1598,9 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		onPressEvent,
 		onPressDay
 	});
-	if (mode === "month") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {
+	else if (mode === "month") view = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {
 		date,
-		events: events ?? [],
+		events: displayEvents,
 		weekStartsOn,
 		weekdayFormat,
 		locale,
@@ -1447,10 +1626,10 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		renderEvent: renderMonthEvent,
 		eventAccessibilityLabel
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeGrid, {
+	else view = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeGrid, {
 		date,
 		mode,
-		events,
+		events: displayEvents,
 		weekStartsOn,
 		weekdayFormat,
 		numberOfDays,
@@ -1465,6 +1644,11 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		hourHeight,
 		scrollOffsetMinutes,
 		timeslots,
+		minHour,
+		maxHour,
+		hideHours,
+		showWeekNumber,
+		weekNumberPrefix,
 		businessHours,
 		showNowIndicator,
 		showAllDayEventCell,
@@ -1477,7 +1661,13 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		onPressDateHeader,
 		renderEvent: renderTimeEvent,
 		eventAccessibilityLabel,
-		hourComponent
+		hourComponent,
+		keyboardEventNavigation
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: { display: "contents" },
+		onKeyDown: handlePageKeys,
+		children: view
 	});
 }
 //#endregion
@@ -1835,7 +2025,9 @@ function DateRangePicker({ value, onChange, formatLabel = defaultRangeLabel, wee
 //#endregion
 //#region src/ResourceTimeline.tsx
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-function DefaultBar({ event, boxProps, theme }) {
+const GUTTER_WIDTH = 56;
+function DefaultBar({ event, height, boxProps, theme }) {
+	const showTime = height != null ? height > 34 : true;
 	const time = (0, _super_calendar_core.eventTimeLabel)({
 		mode: "day",
 		isAllDay: false,
@@ -1875,7 +2067,7 @@ function DefaultBar({ event, boxProps, theme }) {
 				textOverflow: "ellipsis"
 			},
 			children: event.title
-		}), time ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), time && showTime ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			style: {
 				opacity: .75,
 				fontSize: 11
@@ -1900,7 +2092,7 @@ function DefaultBar({ event, boxProps, theme }) {
 * />
 * ```
 */
-function ResourceTimeline({ date, resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, 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, dragStepMinutes = 15, className, style, classNames, styles }) {
 	const theme = (0, react.useMemo)(() => mergeDomTheme(themeOverrides), [themeOverrides]);
 	const slot = createSlots({
 		classNames,
@@ -1908,6 +2100,8 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 	});
 	const Renderer = renderEvent;
 	const snapHours = dragStepMinutes / 60;
+	const vertical = orientation === "vertical";
+	const hourSize = vertical ? hourHeight : hourWidth;
 	const [drag, setDrag] = (0, react.useState)(null);
 	const dragRef = (0, react.useRef)(null);
 	const origin = (0, react.useRef)(null);
@@ -1922,7 +2116,7 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 			e.target.setPointerCapture?.(e.pointerId);
 		} catch {}
 		origin.current = {
-			x: e.clientX,
+			x: vertical ? e.clientY : e.clientX,
 			startHours,
 			durationHours
 		};
@@ -1937,7 +2131,7 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 	const moveDrag = (e) => {
 		const d = dragRef.current;
 		if (!d || !origin.current) return;
-		const dHours = (e.clientX - origin.current.x) / hourWidth;
+		const dHours = ((vertical ? e.clientY : e.clientX) - origin.current.x) / hourSize;
 		const snap = (v) => Math.round(v / snapHours) * snapHours;
 		if (d.kind === "move") {
 			const startHours = clamp(snap(origin.current.startHours + dHours), startHour, endHour - d.durationHours);
@@ -1992,6 +2186,172 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 		resourceId,
 		date
 	]);
+	if (vertical) {
+		const trackHeight = (endHour - startHour) * hourHeight;
+		const vGridLines = `repeating-linear-gradient(to bottom, transparent 0, transparent ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight}px)`;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className,
+			style: {
+				fontFamily: theme.fontFamily,
+				color: theme.text,
+				overflowY: "auto",
+				...style
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				...slot("header", {
+					base: {
+						display: "flex",
+						position: "sticky",
+						top: 0,
+						zIndex: 2
+					},
+					themed: {
+						borderBottom: `1px solid ${theme.gridLine}`,
+						background: theme.surface
+					}
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ...slot("corner", { base: {
+					width: GUTTER_WIDTH,
+					flex: "none"
+				} }) }), resources.map((resource) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...slot("resourceLabel", {
+						base: {
+							flex: 1,
+							minWidth: 0,
+							padding: "6px 4px",
+							textAlign: "center",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							boxSizing: "border-box"
+						},
+						themed: {
+							fontSize: 13,
+							fontWeight: 600,
+							borderLeft: `1px solid ${theme.gridLine}`
+						}
+					}),
+					children: resource.title ?? resource.id
+				}, resource.id))]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: { display: "flex" },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					...slot("timeAxis", { base: {
+						position: "relative",
+						width: GUTTER_WIDTH,
+						flex: "none",
+						height: trackHeight
+					} }),
+					children: hours.map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						...slot("hourTick", {
+							base: {
+								position: "absolute",
+								top: Math.max(0, (h - startHour) * hourHeight - 6),
+								right: 6
+							},
+							themed: {
+								fontSize: 10,
+								color: theme.textMuted
+							}
+						}),
+						children: (0, _super_calendar_core.formatHour)(h, { ampm })
+					}, h))
+				}), resources.map((resource) => {
+					const positioned = byResource.get(resource.id) ?? [];
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						...slot("row", {
+							base: {
+								flex: 1,
+								minWidth: 0
+							},
+							themed: { borderLeft: `1px solid ${theme.gridLine}` }
+						}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							...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: {
+											position: "absolute",
+											left: 0,
+											right: 0,
+											bottom: 0,
+											height: 8,
+											cursor: "ns-resize",
+											touchAction: "none"
+										}
+									}) : null]
+								}, idx);
+							})]
+						})
+					}, resource.id);
+				})]
+			})]
+		});
+	}
 	const gridLines = `repeating-linear-gradient(to right, transparent 0, transparent ${hourWidth - 1}px, ${theme.gridLine} ${hourWidth - 1}px, ${theme.gridLine} ${hourWidth}px)`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className,