react-native-bigger-calendar 0.1.0 → 0.2.1

package/dist/index.mjs

@@ -1,9 +1,9 @@
+import { addDays, addMonths, differenceInCalendarDays, differenceInCalendarMonths, differenceInMinutes, eachDayOfInterval, endOfDay, endOfMonth, endOfWeek, format, getHours, getISOWeek, getMinutes, isSameDay, isSameMonth, isToday, max, min, startOfDay, startOfMonth, startOfWeek } from "date-fns";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import Animated, { scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
-import { addDays, addMonths, differenceInCalendarDays, differenceInCalendarMonths, differenceInMinutes, eachDayOfInterval, endOfMonth, endOfWeek, format, getHours, getMinutes, isSameDay, isSameMonth, isToday, max, min, startOfDay, startOfMonth, startOfWeek } from "date-fns";
+import { LegendList } from "@legendapp/list/react-native";
 import { Pressable, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { LegendList } from "@legendapp/list/react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 //#region src/theme.ts
 const defaultTheme = {
@@ -63,18 +63,169 @@ const CalendarThemeContext = createContext(defaultTheme);
 const CalendarThemeProvider = CalendarThemeContext.Provider;
 const useCalendarTheme = () => useContext(CalendarThemeContext);
 //#endregion
+//#region src/utils/dates.ts
+/** The seven dates of the week containing `date`, starting on `weekStartsOn`. */
+const getWeekDays = (date, weekStartsOn) => {
+	const start = startOfWeek(date, { weekStartsOn });
+	return Array.from({ length: 7 }, (_, index) => addDays(start, index));
+};
+/** How many day columns a time-grid mode shows. `custom` uses `numberOfDays`. */
+const viewDayCount = (mode, numberOfDays = 1) => {
+	switch (mode) {
+		case "week": return 7;
+		case "3days": return 3;
+		case "custom": return Math.max(1, Math.floor(numberOfDays));
+		default: return 1;
+	}
+};
+/**
+* Days in the inclusive span from `weekStartsOn` to `weekEndsOn` (1–7),
+* wrapping when the end precedes the start (e.g. Sat→Wed). Mirrors
+* react-native-big-calendar's `weekDaysCount`.
+*/
+const weekDaysCount = (weekStartsOn, weekEndsOn) => {
+	if (weekEndsOn < weekStartsOn) {
+		let count = 1;
+		let i = weekStartsOn;
+		while (i !== weekEndsOn && count <= 7) {
+			i = (i + 1) % 7;
+			count++;
+		}
+		return count;
+	}
+	if (weekEndsOn > weekStartsOn) return weekEndsOn - weekStartsOn + 1;
+	return 1;
+};
+/**
+* The day columns to render for a time-grid page. `week` spans the calendar week
+* (honouring `weekStartsOn`). `custom` with a `weekEndsOn` spans the partial week
+* from `weekStartsOn` to `weekEndsOn` (anchored to `date`'s week, paging by week);
+* otherwise every mode shows `viewDayCount` consecutive days starting at `date`.
+*/
+const getViewDays = (mode, date, weekStartsOn, numberOfDays = 1, isRTL = false, weekEndsOn) => {
+	let days;
+	if (mode === "week") days = getWeekDays(date, weekStartsOn);
+	else if (mode === "custom" && weekEndsOn != null) {
+		const subject = startOfDay(date);
+		const offset = weekStartsOn - subject.getDay();
+		days = Array.from({ length: weekDaysCount(weekStartsOn, weekEndsOn) }, (_, index) => addDays(subject, index + offset));
+	} else days = Array.from({ length: viewDayCount(mode, numberOfDays) }, (_, index) => addDays(startOfDay(date), index));
+	return isRTL ? days.reverse() : days;
+};
+const isWeekend = (date) => {
+	const day = date.getDay();
+	return day === 0 || day === 6;
+};
+const getIsToday = (date) => isToday(date);
+const isSameCalendarDay = (a, b) => isSameDay(a, b);
+/** Minutes elapsed since midnight (0–1439). */
+const minutesIntoDay = (date) => getHours(date) * 60 + getMinutes(date);
+//#endregion
+//#region src/components/Agenda.tsx
+/**
+* A vertical, day-grouped list of events (no time grid). Events are sorted by
+* start, grouped under a date header per day. The consumer controls which
+* events (and therefore which date range) are shown.
+*/
+function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLongPressEvent, onPressDay, activeDate, itemSeparatorComponent }) {
+	const theme = useCalendarTheme();
+	const RenderEventComponent = renderEvent;
+	const rows = useMemo(() => {
+		const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+		const out = [];
+		let currentDay = null;
+		sorted.forEach((event, index) => {
+			if (!currentDay || !isSameDay(event.start, currentDay)) {
+				currentDay = startOfDay(event.start);
+				out.push({
+					kind: "header",
+					date: currentDay,
+					key: `h-${currentDay.toISOString()}`
+				});
+			}
+			out.push({
+				kind: "event",
+				event,
+				index,
+				key: `e-${keyExtractor(event, index)}`
+			});
+		});
+		return out;
+	}, [events, keyExtractor]);
+	const keyExtractorRow = useCallback((row) => row.key, []);
+	const renderItem = useCallback(({ item }) => {
+		if (item.kind === "header") {
+			const isHighlighted = activeDate ? isSameDay(item.date, activeDate) : getIsToday(item.date);
+			return /* @__PURE__ */ jsx(Text, {
+				style: [
+					theme.text.weekday,
+					styles$5.header,
+					{ color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted }
+				],
+				onPress: onPressDay ? () => onPressDay(item.date) : void 0,
+				accessibilityRole: onPressDay ? "button" : "header",
+				children: format(item.date, "EEEE, d LLLL", { locale })
+			});
+		}
+		return /* @__PURE__ */ jsx(View, {
+			style: styles$5.eventRow,
+			children: /* @__PURE__ */ jsx(RenderEventComponent, {
+				event: item.event,
+				mode: "schedule",
+				onPress: () => onPressEvent(item.event),
+				onLongPress: onLongPressEvent ? () => onLongPressEvent(item.event) : void 0
+			})
+		});
+	}, [
+		theme,
+		locale,
+		activeDate,
+		onPressDay,
+		onPressEvent,
+		onLongPressEvent,
+		RenderEventComponent
+	]);
+	return /* @__PURE__ */ jsx(LegendList, {
+		style: styles$5.list,
+		data: rows,
+		keyExtractor: keyExtractorRow,
+		renderItem,
+		ItemSeparatorComponent: itemSeparatorComponent ?? void 0,
+		recycleItems: false
+	});
+}
+const styles$5 = StyleSheet.create({
+	list: { flex: 1 },
+	header: {
+		paddingTop: 12,
+		paddingBottom: 4,
+		paddingHorizontal: 12
+	},
+	eventRow: {
+		paddingHorizontal: 12,
+		paddingVertical: 2
+	}
+});
+//#endregion
 //#region src/components/DefaultEvent.tsx
 /**
 * The built-in event renderer: a filled, rounded box showing the event title
 * and (on the day/week grid) its time range. Pass your own `renderEvent` to
 * `<Calendar>` to replace it entirely.
 */
-function DefaultEvent({ event, mode, onPress }) {
+function DefaultEvent({ event, mode, isAllDay, ampm = false, showTime = true, cellStyle, onPress, onLongPress }) {
 	const theme = useCalendarTheme();
-	const showTime = mode !== "month";
+	const timeFormat = ampm ? "h:mm a" : "HH:mm";
+	const shouldShowTime = mode !== "month" && !isAllDay && showTime;
 	return /* @__PURE__ */ jsxs(TouchableOpacity, {
-		style: [styles$3.box, { backgroundColor: theme.colors.eventBackground }],
+		style: [
+			styles$4.box,
+			{ backgroundColor: theme.colors.eventBackground },
+			event.disabled && styles$4.disabled,
+			cellStyle
+		],
 		onPress,
+		onLongPress,
 		activeOpacity: .7,
 		accessibilityRole: "button",
 		accessibilityLabel: event.title,
@@ -84,15 +235,15 @@ function DefaultEvent({ event, mode, onPress }) {
 			ellipsizeMode: "tail",
 			allowFontScaling: false,
 			children: event.title
-		}) : null, showTime ? /* @__PURE__ */ jsx(Text, {
-			style: [styles$3.time, { color: theme.colors.eventText }],
+		}) : null, shouldShowTime ? /* @__PURE__ */ jsx(Text, {
+			style: [styles$4.time, { color: theme.colors.eventText }],
 			numberOfLines: 1,
 			allowFontScaling: false,
-			children: `${format(event.start, "HH:mm")} - ${format(event.end, "HH:mm")}`
+			children: `${format(event.start, timeFormat)} - ${format(event.end, timeFormat)}`
 		}) : null]
 	});
 }
-const styles$3 = StyleSheet.create({
+const styles$4 = StyleSheet.create({
 	box: {
 		flex: 1,
 		borderRadius: 6,
@@ -100,24 +251,10 @@ const styles$3 = StyleSheet.create({
 		paddingHorizontal: 4,
 		overflow: "hidden"
 	},
-	time: { fontSize: 11 }
+	time: { fontSize: 11 },
+	disabled: { opacity: .5 }
 });
 //#endregion
-//#region src/utils/dates.ts
-/** The seven dates of the week containing `date`, starting on `weekStartsOn`. */
-const getWeekDays = (date, weekStartsOn) => {
-	const start = startOfWeek(date, { weekStartsOn });
-	return Array.from({ length: 7 }, (_, index) => addDays(start, index));
-};
-const isWeekend = (date) => {
-	const day = date.getDay();
-	return day === 0 || day === 6;
-};
-const getIsToday = (date) => isToday(date);
-const isSameCalendarDay = (a, b) => isSameDay(a, b);
-/** Minutes elapsed since midnight (0–1439). */
-const minutesIntoDay = (date) => getHours(date) * 60 + getMinutes(date);
-//#endregion
 //#region src/utils/layout.ts
 const MINUTES_PER_HOUR$1 = 60;
 const MIN_DURATION_HOURS = .25;
@@ -130,7 +267,7 @@ const MIN_DURATION_HOURS = .25;
 function layoutDayEvents(events, day) {
 	const dayStart = startOfDay(day);
 	const nextDayStart = addDays(dayStart, 1);
-	const segments = events.filter((event) => event.start < nextDayStart && event.end > dayStart).map((event) => {
+	const segments = events.filter((event) => !isAllDayEvent(event)).filter((event) => event.start < nextDayStart && event.end > dayStart).map((event) => {
 		const segStart = max([event.start, dayStart]);
 		const segEnd = min([event.end, nextDayStart]);
 		return {
@@ -174,6 +311,16 @@ function layoutDayEvents(events, day) {
 	if (cluster.length > 0) flushCluster();
 	return positioned;
 }
+const atMidnight = (date) => date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0 && date.getMilliseconds() === 0;
+/**
+* Whether an event belongs in the all-day lane. An explicit `allDay` flag wins;
+* otherwise it's inferred when the event spans whole days (both `start` and
+* `end` land on midnight, e.g. an iCal-style all-day event). Pure.
+*/
+function isAllDayEvent(event) {
+	if (typeof event.allDay === "boolean") return event.allDay;
+	return event.end > event.start && atMidnight(event.start) && atMidnight(event.end);
+}
 /**
 * The `startOfDay` ISO keys of every calendar day an event touches (inclusive).
 * An event ending exactly at midnight does not count the following day. Used to
@@ -193,15 +340,23 @@ const chunkIntoWeeks = (days) => {
 	for (let index = 0; index < days.length; index += 7) weeks.push(days.slice(index, index + 7));
 	return weeks;
 };
-function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, renderEvent, keyExtractor, onPressDay, onPressEvent, onPressMore }) {
+function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView = true, moreLabel = "{moreCount} More", showAdjacentMonths = true, disableMonthEventCellPress = false, isRTL = false, showSixWeeks = false, activeDate, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore }) {
 	const theme = useCalendarTheme();
 	const RenderEventComponent = renderEvent;
 	const weeks = useMemo(() => {
-		return chunkIntoWeeks(eachDayOfInterval({
-			start: startOfWeek(startOfMonth(date), { weekStartsOn }),
-			end: endOfWeek(endOfMonth(date), { weekStartsOn })
+		const start = startOfWeek(startOfMonth(date), { weekStartsOn });
+		const naturalEnd = endOfWeek(endOfMonth(date), { weekStartsOn });
+		const chunked = chunkIntoWeeks(eachDayOfInterval({
+			start,
+			end: showSixWeeks ? addDays(start, 41) : naturalEnd
 		}));
-	}, [date, weekStartsOn]);
+		return isRTL ? chunked.map((week) => [...week].reverse()) : chunked;
+	}, [
+		date,
+		weekStartsOn,
+		isRTL,
+		showSixWeeks
+	]);
 	const eventsByDay = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
 		for (const event of events) for (const key of eventDayKeys(event)) {
@@ -209,29 +364,38 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, rend
 			if (existing) existing.push(event);
 			else map.set(key, [event]);
 		}
+		if (sortedMonthView) for (const list of map.values()) list.sort((a, b) => a.start.getTime() - b.start.getTime());
 		return map;
-	}, [events]);
+	}, [events, sortedMonthView]);
 	const renderDay = (day) => {
-		const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
 		const isCurrentMonth = isSameMonth(day, date);
+		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ jsx(View, { style: [
+			styles$3.dayCell,
+			{ borderColor: theme.colors.gridLine },
+			isWeekend(day) && { backgroundColor: theme.colors.weekendBackground }
+		] }, day.toISOString());
+		const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
 		const isToday = getIsToday(day);
+		const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
 		const hiddenCount = dayEvents.length - maxVisibleEventCount;
-		const dateColor = isToday ? theme.colors.todayText : isCurrentMonth ? theme.colors.text : theme.colors.textDisabled;
+		const dateColor = isHighlighted ? theme.colors.todayText : isCurrentMonth ? theme.colors.text : theme.colors.textDisabled;
 		const eventCount = dayEvents.length;
-		const accessibilityLabel = `${format(day, "EEEE, d LLLL yyyy")}${isToday ? ", today" : ""}, ${eventCount} ${eventCount === 1 ? "event" : "events"}`;
+		const accessibilityLabel = `${format(day, "EEEE, d LLLL yyyy", { locale })}${isToday ? ", today" : ""}, ${eventCount} ${eventCount === 1 ? "event" : "events"}`;
 		return /* @__PURE__ */ jsxs(TouchableOpacity, {
 			style: [
-				styles$2.dayCell,
+				styles$3.dayCell,
 				{ borderColor: theme.colors.gridLine },
-				isWeekend(day) && { backgroundColor: theme.colors.weekendBackground }
+				isWeekend(day) && { backgroundColor: theme.colors.weekendBackground },
+				calendarCellStyle?.(day)
 			],
 			onPress: onPressDay ? () => onPressDay(day) : void 0,
-			disabled: !onPressDay,
+			onLongPress: onLongPressDay ? () => onLongPressDay(day) : void 0,
+			disabled: !onPressDay && !onLongPressDay,
 			accessibilityRole: onPressDay ? "button" : void 0,
 			accessibilityLabel,
 			children: [
 				/* @__PURE__ */ jsx(View, {
-					style: [styles$2.dateBadge, isToday && {
+					style: [styles$3.dateBadge, isHighlighted && {
 						backgroundColor: theme.colors.todayBackground,
 						borderRadius: theme.todayBadgeRadius
 					}],
@@ -242,38 +406,40 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, rend
 					})
 				}),
 				dayEvents.slice(0, maxVisibleEventCount).map((event, index) => /* @__PURE__ */ jsx(View, {
-					style: styles$2.monthEvent,
+					style: styles$3.monthEvent,
 					children: /* @__PURE__ */ jsx(RenderEventComponent, {
 						event,
 						mode: "month",
-						onPress: () => onPressEvent(event)
+						isAllDay: isAllDayEvent(event),
+						onPress: disableMonthEventCellPress ? () => {} : () => onPressEvent(event),
+						onLongPress: disableMonthEventCellPress || !onLongPressEvent ? void 0 : () => onLongPressEvent(event)
 					})
 				}, keyExtractor(event, index))),
 				hiddenCount > 0 ? /* @__PURE__ */ jsx(Text, {
 					style: [
 						theme.text.more,
-						styles$2.moreLabel,
+						styles$3.moreLabel,
 						{ color: theme.colors.textMuted }
 					],
 					onPress: onPressMore ? () => onPressMore(dayEvents, day) : void 0,
 					accessibilityRole: "button",
 					accessibilityLabel: `Show ${hiddenCount} more events`,
 					allowFontScaling: false,
-					children: `${hiddenCount} More`
+					children: moreLabel.replace("{moreCount}", String(hiddenCount))
 				}) : null
 			]
 		}, day.toISOString());
 	};
 	return /* @__PURE__ */ jsx(View, {
-		style: styles$2.container,
+		style: styles$3.container,
 		children: weeks.map((week) => /* @__PURE__ */ jsx(View, {
-			style: styles$2.weekRow,
+			style: styles$3.weekRow,
 			children: week.map((day) => renderDay(day))
 		}, week[0].toISOString()))
 	});
 }
 const MonthView = memo(MonthViewInner);
-const styles$2 = StyleSheet.create({
+const styles$3 = StyleSheet.create({
 	container: { flex: 1 },
 	weekRow: {
 		flex: 1,
@@ -301,7 +467,7 @@ const styles$2 = StyleSheet.create({
 //#region src/components/MonthPager.tsx
 const PAGE_WINDOW$1 = 60;
 const PAGE_VIEWABILITY$1 = { itemVisiblePercentThreshold: 90 };
-function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, renderEvent, keyExtractor, onPressDay, onPressEvent, onPressMore, onChangeDate, freeSwipe = false }) {
+function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView }) {
 	const { width, height } = useWindowDimensions();
 	const listRef = useRef(null);
 	const [pageHeight, setPageHeight] = useState(height);
@@ -324,6 +490,14 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, ren
 			animated: false
 		});
 	}, [activeIndex]);
+	const weekDays = useMemo(() => {
+		const days = getWeekDays(anchor, weekStartsOn);
+		return isRTL ? days.reverse() : days;
+	}, [
+		anchor,
+		weekStartsOn,
+		isRTL
+	]);
 	const snapToIndices = useMemo(() => monthDates.map((_, index) => index), [monthDates]);
 	const keyExtractorList = useCallback((item) => item.toISOString(), []);
 	const getFixedItemSize = useCallback(() => width, [width]);
@@ -337,10 +511,21 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, ren
 			events,
 			maxVisibleEventCount,
 			weekStartsOn,
+			locale,
+			sortedMonthView,
+			moreLabel,
+			showAdjacentMonths,
+			disableMonthEventCellPress,
+			isRTL,
+			showSixWeeks,
+			activeDate,
+			calendarCellStyle,
 			renderEvent,
 			keyExtractor,
 			onPressDay,
+			onLongPressDay,
 			onPressEvent,
+			onLongPressEvent,
 			onPressMore
 		})
 	}), [
@@ -349,44 +534,131 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, ren
 		events,
 		maxVisibleEventCount,
 		weekStartsOn,
+		locale,
+		sortedMonthView,
+		moreLabel,
+		showAdjacentMonths,
+		disableMonthEventCellPress,
+		isRTL,
+		showSixWeeks,
+		activeDate,
+		calendarCellStyle,
 		renderEvent,
 		keyExtractor,
 		onPressDay,
+		onLongPressDay,
 		onPressEvent,
+		onLongPressEvent,
 		onPressMore
 	]);
-	return /* @__PURE__ */ jsx(View, {
-		style: styles$1.pager,
-		onLayout: (event) => setPageHeight(event.nativeEvent.layout.height),
-		children: /* @__PURE__ */ jsx(LegendList, {
-			ref: listRef,
-			style: styles$1.pagerList,
-			data: monthDates,
-			horizontal: true,
-			recycleItems: false,
-			keyExtractor: keyExtractorList,
-			getFixedItemSize,
-			pagingEnabled: !freeSwipe,
-			snapToIndices: freeSwipe ? snapToIndices : void 0,
-			initialScrollIndex: activeIndex,
-			showsHorizontalScrollIndicator: false,
-			viewabilityConfig: PAGE_VIEWABILITY$1,
-			onViewableItemsChanged: handleViewableItemsChanged,
-			renderItem
-		}, pageHeight)
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles$2.container,
+		children: [renderHeaderForMonthView ? renderHeaderForMonthView(weekDays) : /* @__PURE__ */ jsx(MonthWeekdayHeader, {
+			weekDays,
+			locale
+		}), /* @__PURE__ */ jsx(View, {
+			style: styles$2.pager,
+			onLayout: (event) => setPageHeight(event.nativeEvent.layout.height),
+			children: /* @__PURE__ */ jsx(LegendList, {
+				ref: listRef,
+				style: styles$2.pagerList,
+				data: monthDates,
+				horizontal: true,
+				recycleItems: false,
+				keyExtractor: keyExtractorList,
+				getFixedItemSize,
+				scrollEnabled: swipeEnabled,
+				pagingEnabled: !freeSwipe,
+				snapToIndices: freeSwipe ? snapToIndices : void 0,
+				initialScrollIndex: activeIndex,
+				showsHorizontalScrollIndicator: false,
+				viewabilityConfig: PAGE_VIEWABILITY$1,
+				onViewableItemsChanged: handleViewableItemsChanged,
+				renderItem
+			}, pageHeight)
+		})]
 	});
 }
 const MonthPager = memo(MonthPagerInner);
-const styles$1 = StyleSheet.create({
+const MonthWeekdayHeader = ({ weekDays, locale }) => {
+	const theme = useCalendarTheme();
+	return /* @__PURE__ */ jsx(View, {
+		style: styles$2.weekdayHeader,
+		children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
+			style: [
+				theme.text.weekday,
+				styles$2.weekdayLabel,
+				{ color: theme.colors.textMuted }
+			],
+			allowFontScaling: false,
+			children: format(day, "EEE", { locale })
+		}, day.toISOString()))
+	});
+};
+const styles$2 = StyleSheet.create({
+	container: { flex: 1 },
 	pager: { flex: 1 },
-	pagerList: { flex: 1 }
+	pagerList: { flex: 1 },
+	weekdayHeader: {
+		flexDirection: "row",
+		paddingBottom: 4
+	},
+	weekdayLabel: {
+		flex: 1,
+		textAlign: "center"
+	}
+});
+//#endregion
+//#region src/components/AllDayLane.tsx
+/**
+* The all-day lane that sits above the scrolling time grid. All-day events are
+* excluded from the timed columns (see `layoutDayEvents`) and shown here,
+* stacked under their day(s). Renders nothing when no day has an all-day event,
+* so timed-only calendars are unaffected.
+*/
+function AllDayLane({ days, events, mode, hourColumnWidth, dayWidth, renderEvent, keyExtractor, onPressEvent, onLongPressEvent }) {
+	const theme = useCalendarTheme();
+	const RenderEventComponent = renderEvent;
+	const allDay = events.filter(isAllDayEvent);
+	const perDay = days.map((day) => {
+		const start = startOfDay(day);
+		const next = addDays(start, 1);
+		return allDay.filter((event) => event.start < next && event.end > start);
+	});
+	if (perDay.every((list) => list.length === 0)) return null;
+	return /* @__PURE__ */ jsxs(View, {
+		style: [styles$1.lane, { borderBottomColor: theme.colors.gridLine }],
+		children: [/* @__PURE__ */ jsx(View, { style: { width: hourColumnWidth } }), days.map((day, dayIndex) => /* @__PURE__ */ jsx(View, {
+			style: [styles$1.column, { width: dayWidth }],
+			children: perDay[dayIndex].map((event, index) => /* @__PURE__ */ jsx(View, {
+				style: styles$1.chip,
+				children: /* @__PURE__ */ jsx(RenderEventComponent, {
+					event,
+					mode,
+					isAllDay: true,
+					onPress: () => onPressEvent(event),
+					onLongPress: onLongPressEvent ? () => onLongPressEvent(event) : void 0
+				})
+			}, keyExtractor(event, index)))
+		}, day.toISOString()))]
+	});
+}
+const styles$1 = StyleSheet.create({
+	lane: {
+		flexDirection: "row",
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		paddingBottom: 2
+	},
+	column: {
+		paddingHorizontal: 1,
+		gap: 2
+	},
+	chip: { minHeight: 18 }
 });
 //#endregion
 //#region src/components/TimeGrid.tsx
 const MINUTES_PER_HOUR = 60;
 const HOURS_PER_DAY = 24;
-const DAY_VIEW_STEP = 1;
-const WEEK_VIEW_STEP = 7;
 const PAGE_WINDOW = 180;
 const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
 const DEFAULT_HOUR_HEIGHT = 64;
@@ -411,7 +683,7 @@ function formatHourLabel(hour, ampm) {
 	const period = hour < 12 ? "AM" : "PM";
 	return `${hour % 12 === 0 ? 12 : hour % 12} ${period}`;
 }
-function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, mode, renderEvent, onPress }) {
+function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, mode, renderEvent, onPress, onLongPress }) {
 	const RenderEventComponent = renderEvent;
 	const boxHeight = useDerivedValue(() => Math.max(positioned.durationHours * cellHeight.value, MIN_EVENT_HEIGHT), [positioned.durationHours]);
 	const boxStyle = useAnimatedStyle(() => ({
@@ -423,6 +695,7 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, mode,
 		minHour
 	]);
 	const handlePress = () => onPress(positioned.event);
+	const handleLongPress = onLongPress ? () => onLongPress(positioned.event) : void 0;
 	return /* @__PURE__ */ jsx(Animated.View, {
 		style: [
 			styles.eventBox,
@@ -438,17 +711,21 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, mode,
 			boxHeight,
 			continuesBefore: positioned.continuesBefore,
 			continuesAfter: positioned.continuesAfter,
-			onPress: handlePress
+			onPress: handlePress,
+			onLongPress: handleLongPress
 		})
 	});
 }
-const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label }) => {
+const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hourComponent }) => {
 	const theme = useCalendarTheme();
 	const animatedStyle = useAnimatedStyle(() => ({ top: (hour - minHour) * cellHeight.value }), [hour, minHour]);
 	return /* @__PURE__ */ jsxs(Animated.View, {
 		style: [styles.hourRow, animatedStyle],
 		pointerEvents: "none",
-		children: [/* @__PURE__ */ jsx(Text, {
+		children: [hourComponent ? /* @__PURE__ */ jsx(View, {
+			style: { width: hourColumnWidth },
+			children: hourComponent(hour, ampm)
+		}) : /* @__PURE__ */ jsx(Text, {
 			style: [
 				theme.text.hourLabel,
 				styles.hourLabel,
@@ -462,6 +739,25 @@ const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label }) => {
 		}), /* @__PURE__ */ jsx(View, { style: [styles.hourLine, { backgroundColor: theme.colors.gridLine }] })]
 	});
 };
+const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth }) => {
+	const theme = useCalendarTheme();
+	const animatedStyle = useAnimatedStyle(() => ({ top: (hour - minHour + fraction) * cellHeight.value }), [
+		hour,
+		minHour,
+		fraction
+	]);
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles.timeslotLine,
+			{
+				left: hourColumnWidth,
+				backgroundColor: theme.colors.gridLine
+			},
+			animatedStyle
+		],
+		pointerEvents: "none"
+	});
+};
 const NowIndicator = ({ cellHeight, nowHours, minHour, left, color }) => {
 	const animatedStyle = useAnimatedStyle(() => ({ top: (nowHours - minHour) * cellHeight.value }), [nowHours, minHour]);
 	return /* @__PURE__ */ jsx(Animated.View, {
@@ -476,7 +772,7 @@ const NowIndicator = ({ cellHeight, nowHours, minHour, left, color }) => {
 		pointerEvents: "none"
 	});
 };
-function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, committedCellHeight, scrollY, isActive, scrollOffsetMinutes, weekStartsOn, hourColumnWidth, minHour, maxHour, ampm, minHourHeight, maxHourHeight, showNowIndicator, renderEvent, keyExtractor, onPressEvent, onPressCell }) {
+function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hourHeight, committedCellHeight, scrollY, isActive, scrollOffsetMinutes, weekStartsOn, weekEndsOn, hourColumnWidth, minHour, maxHour, ampm, timeslots, isRTL, showVerticalScrollIndicator, verticalScrollEnabled, hourComponent, calendarCellStyle, minHourHeight, maxHourHeight, showNowIndicator, renderEvent, keyExtractor, onPressEvent, onLongPressEvent, onPressCell, onLongPressCell }) {
 	const theme = useCalendarTheme();
 	const { width } = useWindowDimensions();
 	const scrollRef = useAnimatedRef();
@@ -487,24 +783,34 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 	useAnimatedReaction(() => scrollY.value, (current, previous) => {
 		if (!isActive && current !== previous) scrollTo(scrollRef, 0, current, false);
 	});
-	const days = useMemo(() => mode === "week" ? getWeekDays(date, weekStartsOn) : [date], [
+	const days = useMemo(() => getViewDays(mode, date, weekStartsOn, numberOfDays, isRTL, weekEndsOn), [
 		mode,
 		date,
-		weekStartsOn
+		weekStartsOn,
+		numberOfDays,
+		isRTL,
+		weekEndsOn
 	]);
 	const dayWidth = (width - hourColumnWidth) / days.length;
 	const dayLeft = (dayIndex) => hourColumnWidth + dayIndex * dayWidth;
 	const dayLayouts = useMemo(() => days.map((day) => layoutDayEvents(events, day)), [days, events]);
-	const handleBackgroundPress = (event) => {
-		if (!onPressCell) return;
+	const cellDateFromTouch = (event) => {
 		const { locationX, locationY } = event.nativeEvent;
 		const day = days[days.length === 1 ? 0 : Math.floor(locationX / dayWidth)];
-		if (!day) return;
+		if (!day) return null;
 		const minutes = Math.round((minHour + locationY / heightSource.value) * MINUTES_PER_HOUR);
 		const pressed = new Date(day);
 		pressed.setHours(0, 0, 0, 0);
 		pressed.setMinutes(minutes);
-		onPressCell(pressed);
+		return pressed;
+	};
+	const handleBackgroundPress = (event) => {
+		const date = onPressCell && cellDateFromTouch(event);
+		if (date) onPressCell?.(date);
+	};
+	const handleBackgroundLongPress = (event) => {
+		const date = onLongPressCell && cellDateFromTouch(event);
+		if (date) onLongPressCell?.(date);
 	};
 	const hoursRange = useMemo(() => Array.from({ length: maxHour - minHour }, (_, index) => minHour + index), [minHour, maxHour]);
 	const now = useNow(showNowIndicator && isActive);
@@ -533,13 +839,24 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 		minHourHeight,
 		maxHourHeight
 	]);
-	return /* @__PURE__ */ jsx(View, {
+	return /* @__PURE__ */ jsxs(View, {
 		style: styles.container,
-		children: /* @__PURE__ */ jsx(GestureDetector, {
+		children: [/* @__PURE__ */ jsx(AllDayLane, {
+			days,
+			events,
+			mode,
+			hourColumnWidth,
+			dayWidth,
+			renderEvent,
+			keyExtractor,
+			onPressEvent,
+			onLongPressEvent
+		}), /* @__PURE__ */ jsx(GestureDetector, {
 			gesture: zoomGesture,
 			children: /* @__PURE__ */ jsx(Animated.ScrollView, {
 				ref: scrollRef,
-				showsVerticalScrollIndicator: true,
+				showsVerticalScrollIndicator: showVerticalScrollIndicator,
+				scrollEnabled: verticalScrollEnabled,
 				onScroll: scrollHandler,
 				scrollEventThrottle: 16,
 				contentContainerStyle: { paddingTop: HOUR_LABEL_TOP_INSET },
@@ -550,9 +867,10 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 				children: /* @__PURE__ */ jsxs(Animated.View, {
 					style: [styles.content, fullHeightStyle],
 					children: [
-						onPressCell ? /* @__PURE__ */ jsx(Pressable, {
+						onPressCell || onLongPressCell ? /* @__PURE__ */ jsx(Pressable, {
 							style: [styles.cellPressLayer, { left: hourColumnWidth }],
-							onPress: handleBackgroundPress,
+							onPress: onPressCell ? handleBackgroundPress : void 0,
+							onLongPress: onLongPressCell ? handleBackgroundLongPress : void 0,
 							importantForAccessibility: "no",
 							accessibilityElementsHidden: true
 						}) : null,
@@ -568,6 +886,21 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 							],
 							pointerEvents: "none"
 						}, `weekend-${day.toISOString()}`) : null),
+						calendarCellStyle ? days.map((day, dayIndex) => {
+							const cellStyle = calendarCellStyle(day);
+							return cellStyle ? /* @__PURE__ */ jsx(Animated.View, {
+								style: [
+									styles.weekendColumn,
+									{
+										left: dayLeft(dayIndex),
+										width: dayWidth
+									},
+									cellStyle,
+									fullHeightStyle
+								],
+								pointerEvents: "none"
+							}, `cell-${day.toISOString()}`) : null;
+						}) : null,
 						days.map((day, dayIndex) => /* @__PURE__ */ jsx(Animated.View, {
 							style: [
 								styles.daySeparator,
@@ -582,8 +915,17 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 							minHour,
 							cellHeight: heightSource,
 							hourColumnWidth,
-							label: formatHourLabel(hour, ampm)
+							label: formatHourLabel(hour, ampm),
+							ampm,
+							hourComponent
 						}, hour)),
+						timeslots > 1 ? hoursRange.flatMap((hour) => Array.from({ length: timeslots - 1 }, (_, i) => /* @__PURE__ */ jsx(TimeslotLine, {
+							hour,
+							minHour,
+							fraction: (i + 1) / timeslots,
+							cellHeight: heightSource,
+							hourColumnWidth
+						}, `slot-${hour}-${i}`))) : null,
 						dayLayouts.flatMap((layout, dayIndex) => layout.filter((p) => p.startHours < maxHour && p.startHours + p.durationHours > minHour).map((positioned, eventIndex) => {
 							const columnWidth = dayWidth / positioned.columns;
 							return /* @__PURE__ */ jsx(AnimatedEventBox, {
@@ -594,8 +936,9 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 								width: columnWidth,
 								mode,
 								renderEvent,
-								onPress: onPressEvent
-							}, keyExtractor(positioned.event, eventIndex));
+								onPress: onPressEvent,
+								onLongPress: onLongPressEvent
+							}, `${dayIndex}:${keyExtractor(positioned.event, eventIndex)}`);
 						})),
 						showNowIndicator && nowDayIndex >= 0 && nowInWindow ? /* @__PURE__ */ jsx(NowIndicator, {
 							cellHeight: heightSource,
@@ -607,40 +950,48 @@ function TimetablePageInner({ mode, date, events, cellHeight, hourHeight, commit
 					]
 				})
 			})
-		})
+		})]
 	});
 }
 const TimetablePage = memo(TimetablePageInner);
-function TimeGridInner({ mode, date, events, cellHeight, hourHeight = 64, weekStartsOn, renderEvent, keyExtractor, scrollOffsetMinutes = 0, hourColumnWidth = DEFAULT_HOUR_COLUMN_WIDTH, minHour = 0, maxHour = HOURS_PER_DAY, ampm = false, minHourHeight = DEFAULT_MIN_HOUR_HEIGHT, maxHourHeight = DEFAULT_MAX_HOUR_HEIGHT, showNowIndicator = true, locale, freeSwipe = false, onPressEvent, onPressCell, onChangeDate, renderHeader }) {
+function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellHeight, hourHeight = 64, weekStartsOn, renderEvent, keyExtractor, scrollOffsetMinutes = 0, hourColumnWidth: hourColumnWidthProp = DEFAULT_HOUR_COLUMN_WIDTH, hideHours = false, timeslots = 1, calendarCellStyle, showWeekNumber = false, headerComponent, minHour = 0, maxHour = HOURS_PER_DAY, ampm = false, isRTL = false, minHourHeight = DEFAULT_MIN_HOUR_HEIGHT, maxHourHeight = DEFAULT_MAX_HOUR_HEIGHT, showNowIndicator = true, locale, freeSwipe = false, swipeEnabled = true, showVerticalScrollIndicator = true, verticalScrollEnabled = true, weekNumberPrefix = "W", hourComponent, activeDate, resetPageOnPressCell = false, onPressEvent, onLongPressEvent, onPressCell, onLongPressCell, onPressDateHeader, onChangeDate, renderHeader }) {
 	const clampedMinHour = Math.max(0, Math.min(minHour, HOURS_PER_DAY - 1));
 	const clampedMaxHour = Math.max(clampedMinHour + 1, Math.min(maxHour, HOURS_PER_DAY));
+	const hourColumnWidth = hideHours ? 0 : hourColumnWidthProp;
 	const { width, height } = useWindowDimensions();
 	const listRef = useRef(null);
 	const [pageHeight, setPageHeight] = useState(height);
-	const step = mode === "week" ? WEEK_VIEW_STEP : DAY_VIEW_STEP;
+	const [measured, setMeasured] = useState(false);
+	const weekAnchored = mode === "week" || mode === "custom" && weekEndsOn != null;
+	const step = weekAnchored ? 7 : viewDayCount(mode, numberOfDays);
 	const scrollY = useSharedValue(Math.max(0, scrollOffsetMinutes / MINUTES_PER_HOUR - clampedMinHour) * hourHeight);
 	const committedCellHeight = useSharedValue(hourHeight);
 	const [anchorDate] = useState(date);
-	const anchor = useMemo(() => mode === "week" ? startOfWeek(anchorDate, { weekStartsOn }) : startOfDay(anchorDate), [
-		mode,
+	const anchor = useMemo(() => weekAnchored ? startOfWeek(anchorDate, { weekStartsOn }) : startOfDay(anchorDate), [
+		weekAnchored,
 		anchorDate,
 		weekStartsOn
 	]);
 	const pageDates = useMemo(() => Array.from({ length: 361 }, (_, i) => addDays(anchor, (i - PAGE_WINDOW) * step)), [anchor, step]);
 	const activeIndex = useCallback((target) => {
-		const aligned = mode === "week" ? startOfWeek(target, { weekStartsOn }) : startOfDay(target);
-		return Math.round(differenceInCalendarDays(aligned, anchor) / step) + PAGE_WINDOW;
+		const aligned = weekAnchored ? startOfWeek(target, { weekStartsOn }) : startOfDay(target);
+		return Math.floor(differenceInCalendarDays(aligned, anchor) / step) + PAGE_WINDOW;
 	}, [
 		anchor,
-		mode,
+		weekAnchored,
 		step,
 		weekStartsOn
 	])(date);
 	const viewedIndexRef = useRef(activeIndex);
-	const headerDays = useMemo(() => mode === "week" ? getWeekDays(date, weekStartsOn) : [date], [
+	const headerDays = useMemo(() => getViewDays(mode, pageDates[activeIndex] ?? date, weekStartsOn, numberOfDays, isRTL, weekEndsOn), [
 		mode,
+		pageDates,
+		activeIndex,
 		date,
-		weekStartsOn
+		weekStartsOn,
+		numberOfDays,
+		isRTL,
+		weekEndsOn
 	]);
 	const handleViewableItemsChanged = useCallback((info) => {
 		const settled = info.viewableItems.find((token) => token.isViewable);
@@ -656,6 +1007,21 @@ function TimeGridInner({ mode, date, events, cellHeight, hourHeight = 64, weekSt
 			animated: false
 		});
 	}, [activeIndex]);
+	const handlePressCell = useMemo(() => {
+		if (!onPressCell) return void 0;
+		if (!resetPageOnPressCell) return onPressCell;
+		return (cellDate) => {
+			onPressCell(cellDate);
+			listRef.current?.scrollToIndex({
+				index: activeIndex,
+				animated: true
+			});
+		};
+	}, [
+		onPressCell,
+		resetPageOnPressCell,
+		activeIndex
+	]);
 	const snapToIndices = useMemo(() => pageDates.map((_, index) => index), [pageDates]);
 	const keyExtractorList = useCallback((item) => item.toISOString(), []);
 	const getFixedItemSize = useCallback(() => width, [width]);
@@ -666,6 +1032,7 @@ function TimeGridInner({ mode, date, events, cellHeight, hourHeight = 64, weekSt
 		},
 		children: /* @__PURE__ */ jsx(TimetablePage, {
 			mode,
+			numberOfDays,
 			date: item,
 			events,
 			cellHeight,
@@ -675,22 +1042,32 @@ function TimeGridInner({ mode, date, events, cellHeight, hourHeight = 64, weekSt
 			isActive: index === activeIndex,
 			scrollOffsetMinutes,
 			weekStartsOn,
+			weekEndsOn,
 			hourColumnWidth,
 			minHour: clampedMinHour,
 			maxHour: clampedMaxHour,
 			ampm,
+			timeslots,
+			isRTL,
+			showVerticalScrollIndicator,
+			verticalScrollEnabled,
+			hourComponent,
+			calendarCellStyle,
 			minHourHeight,
 			maxHourHeight,
 			showNowIndicator,
 			renderEvent,
 			keyExtractor,
 			onPressEvent,
-			onPressCell
+			onLongPressEvent,
+			onPressCell: handlePressCell,
+			onLongPressCell
 		})
 	}), [
 		width,
 		pageHeight,
 		mode,
+		numberOfDays,
 		events,
 		cellHeight,
 		hourHeight,
@@ -699,79 +1076,117 @@ function TimeGridInner({ mode, date, events, cellHeight, hourHeight = 64, weekSt
 		activeIndex,
 		scrollOffsetMinutes,
 		weekStartsOn,
+		weekEndsOn,
 		hourColumnWidth,
 		clampedMinHour,
 		clampedMaxHour,
 		ampm,
+		timeslots,
+		isRTL,
+		showVerticalScrollIndicator,
+		verticalScrollEnabled,
+		hourComponent,
+		calendarCellStyle,
 		minHourHeight,
 		maxHourHeight,
 		showNowIndicator,
 		renderEvent,
 		keyExtractor,
 		onPressEvent,
-		onPressCell
+		onLongPressEvent,
+		handlePressCell,
+		onLongPressCell
 	]);
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.container,
-		children: [renderHeader ? renderHeader(headerDays) : /* @__PURE__ */ jsx(DefaultHeader, {
-			days: headerDays,
-			mode,
-			width,
-			hourColumnWidth,
-			locale
-		}), /* @__PURE__ */ jsx(View, {
-			style: styles.pager,
-			onLayout: (event) => setPageHeight(event.nativeEvent.layout.height),
-			children: /* @__PURE__ */ jsx(LegendList, {
-				ref: listRef,
-				style: styles.pagerList,
-				data: pageDates,
-				horizontal: true,
-				recycleItems: false,
-				keyExtractor: keyExtractorList,
-				getFixedItemSize,
-				pagingEnabled: !freeSwipe,
-				snapToIndices: freeSwipe ? snapToIndices : void 0,
-				initialScrollIndex: activeIndex,
-				showsHorizontalScrollIndicator: false,
-				viewabilityConfig: PAGE_VIEWABILITY,
-				onViewableItemsChanged: handleViewableItemsChanged,
-				renderItem
-			}, pageHeight)
-		})]
+		children: [
+			renderHeader ? renderHeader(headerDays) : /* @__PURE__ */ jsx(DefaultHeader, {
+				days: headerDays,
+				mode,
+				width,
+				hourColumnWidth,
+				showWeekNumber,
+				weekNumberPrefix,
+				locale,
+				activeDate,
+				onPressDateHeader
+			}),
+			headerComponent,
+			/* @__PURE__ */ jsx(View, {
+				style: styles.pager,
+				onLayout: (event) => {
+					setPageHeight(event.nativeEvent.layout.height);
+					setMeasured(true);
+				},
+				children: /* @__PURE__ */ jsx(LegendList, {
+					ref: listRef,
+					style: styles.pagerList,
+					data: pageDates,
+					horizontal: true,
+					recycleItems: false,
+					keyExtractor: keyExtractorList,
+					getFixedItemSize,
+					scrollEnabled: swipeEnabled,
+					pagingEnabled: !freeSwipe,
+					snapToIndices: freeSwipe ? snapToIndices : void 0,
+					initialScrollIndex: activeIndex,
+					showsHorizontalScrollIndicator: false,
+					viewabilityConfig: PAGE_VIEWABILITY,
+					onViewableItemsChanged: handleViewableItemsChanged,
+					renderItem
+				}, measured ? "grid" : "grid-seed")
+			})
+		]
 	});
 }
 const TimeGrid = memo(TimeGridInner);
-const DefaultHeader = ({ days, mode, width, hourColumnWidth, locale }) => {
-	const dayWidth = mode === "week" ? (width - hourColumnWidth) / days.length : width;
+const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, weekNumberPrefix = "W", locale, activeDate, onPressDateHeader }) => {
+	const theme = useCalendarTheme();
+	const dayWidth = (width - hourColumnWidth) / days.length;
 	return /* @__PURE__ */ jsxs(View, {
 		style: styles.headerRow,
-		children: [mode === "week" ? /* @__PURE__ */ jsx(View, { style: { width: hourColumnWidth } }) : null, days.map((day) => /* @__PURE__ */ jsx(DayHeader, {
+		children: [/* @__PURE__ */ jsx(View, {
+			style: [styles.weekNumberGutter, { width: hourColumnWidth }],
+			children: showWeekNumber && hourColumnWidth > 0 && days[0] ? /* @__PURE__ */ jsx(Text, {
+				style: [theme.text.hourLabel, { color: theme.colors.textMuted }],
+				allowFontScaling: false,
+				children: `${weekNumberPrefix}${getISOWeek(days[0])}`
+			}) : null
+		}), days.map((day) => /* @__PURE__ */ jsx(DayHeader, {
 			day,
 			mode,
 			width: dayWidth,
-			locale
+			locale,
+			activeDate,
+			onPressDateHeader
 		}, day.toISOString()))]
 	});
 };
-const DayHeader = ({ day, mode, width, locale }) => {
+const DayHeader = ({ day, mode, width, locale, activeDate, onPressDateHeader }) => {
 	const theme = useCalendarTheme();
 	const isToday = getIsToday(day);
+	const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
 	const badgeSize = mode === "day" ? 44 : 32;
-	return /* @__PURE__ */ jsxs(View, {
+	return /* @__PURE__ */ jsxs(Pressable, {
 		style: [styles.dayHeader, {
 			width,
 			gap: mode === "day" ? 4 : 2
 		}],
+		onPress: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
+		disabled: !onPressDateHeader,
+		accessibilityRole: onPressDateHeader ? "button" : void 0,
 		children: [/* @__PURE__ */ jsx(View, {
-			style: [styles.dayHeaderBadge, isToday && {
-				backgroundColor: theme.colors.todayBackground,
-				borderRadius: 999,
-				width: badgeSize,
-				height: badgeSize
-			}],
+			style: [
+				styles.dayHeaderBadge,
+				{
+					width: badgeSize,
+					height: badgeSize,
+					borderRadius: 999
+				},
+				isHighlighted && { backgroundColor: theme.colors.todayBackground }
+			],
 			children: /* @__PURE__ */ jsx(Text, {
-				style: [theme.text.dayNumber, { color: isToday ? theme.colors.todayText : theme.colors.text }],
+				style: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
 				allowFontScaling: false,
 				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
 				children: day.getDate()
@@ -779,7 +1194,7 @@ const DayHeader = ({ day, mode, width, locale }) => {
 		}), /* @__PURE__ */ jsx(Text, {
 			style: [theme.text.weekday, { color: theme.colors.text }],
 			allowFontScaling: false,
-			children: day.toLocaleDateString(locale, { weekday: "short" })
+			children: format(day, "EEE", { locale })
 		})]
 	});
 };
@@ -792,6 +1207,10 @@ const styles = StyleSheet.create({
 		alignItems: "center",
 		paddingBottom: 8
 	},
+	weekNumberGutter: {
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
 	dayHeader: { alignItems: "center" },
 	dayHeaderBadge: {
 		justifyContent: "center",
@@ -831,6 +1250,12 @@ const styles = StyleSheet.create({
 		flex: 1,
 		height: StyleSheet.hairlineWidth
 	},
+	timeslotLine: {
+		position: "absolute",
+		right: 0,
+		height: StyleSheet.hairlineWidth,
+		opacity: .5
+	},
 	eventBox: {
 		position: "absolute",
 		overflow: "hidden"
@@ -844,9 +1269,50 @@ const styles = StyleSheet.create({
 //#endregion
 //#region src/components/Calendar.tsx
 const defaultKeyExtractor = (event) => `${event.start.toISOString()}|${event.end.toISOString()}|${event.title ?? ""}`;
-function Calendar({ events, mode, date, onChangeDate, onPressEvent, onPressDay, onPressMore, onPressCell, maxVisibleEventCount = 2, weekStartsOn = 0, renderEvent = DefaultEvent, keyExtractor = defaultKeyExtractor, theme, cellHeight: cellHeightProp, hourHeight = 64, minHourHeight, maxHourHeight, hourColumnWidth, minHour, maxHour, ampm, scrollOffsetMinutes, showNowIndicator, locale, freeSwipe, renderTimeGridHeader }) {
+function visibleRange(mode, date, weekStartsOn, numberOfDays, weekEndsOn) {
+	if (mode === "month") return [startOfWeek(startOfMonth(date), { weekStartsOn }), endOfWeek(endOfMonth(date), { weekStartsOn })];
+	const days = getViewDays(mode, date, weekStartsOn, numberOfDays, false, weekEndsOn);
+	return [startOfDay(days[0]), endOfDay(days[days.length - 1])];
+}
+function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPressEvent, onLongPressEvent, onPressDay, onLongPressDay, onPressMore, onPressCell, resetPageOnPressCell, onLongPressCell, onPressDateHeader, maxVisibleEventCount = 2, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, weekStartsOn = 0, numberOfDays, weekEndsOn, renderEvent = DefaultEvent, eventCellStyle, calendarCellStyle, keyExtractor = defaultKeyExtractor, theme, cellHeight: cellHeightProp, hourHeight = 64, minHourHeight, maxHourHeight, hourColumnWidth, hideHours, timeslots, showWeekNumber, weekNumberPrefix, hourComponent, showSixWeeks, swipeEnabled, showVerticalScrollIndicator, verticalScrollEnabled, headerComponent, minHour, maxHour, ampm, showTime, scrollOffsetMinutes, showNowIndicator, locale, activeDate, isRTL, freeSwipe, renderTimeGridHeader, renderHeaderForMonthView, itemSeparatorComponent }) {
 	const mergedTheme = useMemo(() => mergeTheme(theme), [theme]);
 	const internalCellHeight = useSharedValue(hourHeight);
+	const cellHeight = cellHeightProp ?? internalCellHeight;
+	const handlePressEvent = useCallback((event) => {
+		if (!event.disabled) onPressEvent(event);
+	}, [onPressEvent]);
+	const handleLongPressEvent = useMemo(() => onLongPressEvent ? (event) => {
+		if (!event.disabled) onLongPressEvent(event);
+	} : void 0, [onLongPressEvent]);
+	const handleChangeDate = useCallback((next) => {
+		onChangeDate(next);
+		onChangeDateRange?.(visibleRange(mode, next, weekStartsOn, numberOfDays ?? 1, weekEndsOn));
+	}, [
+		onChangeDate,
+		onChangeDateRange,
+		mode,
+		weekStartsOn,
+		numberOfDays,
+		weekEndsOn
+	]);
+	const resolvedRenderEvent = useMemo(() => {
+		if (eventCellStyle == null && ampm == null && showTime == null) return renderEvent;
+		const Base = renderEvent;
+		return function StyledEvent(props) {
+			const cellStyle = typeof eventCellStyle === "function" ? eventCellStyle(props.event) : eventCellStyle;
+			return /* @__PURE__ */ jsx(Base, {
+				...props,
+				cellStyle,
+				ampm,
+				showTime
+			});
+		};
+	}, [
+		renderEvent,
+		eventCellStyle,
+		ampm,
+		showTime
+	]);
 	return /* @__PURE__ */ jsx(CalendarThemeProvider, {
 		value: mergedTheme,
 		children: mode === "month" ? /* @__PURE__ */ jsx(MonthPager, {
@@ -854,24 +1320,58 @@ function Calendar({ events, mode, date, onChangeDate, onPressEvent, onPressDay,
 			events,
 			maxVisibleEventCount,
 			weekStartsOn,
-			renderEvent,
+			locale,
+			sortedMonthView,
+			moreLabel,
+			showAdjacentMonths,
+			disableMonthEventCellPress,
+			isRTL,
+			showSixWeeks,
+			activeDate,
+			renderHeaderForMonthView,
+			calendarCellStyle,
+			renderEvent: resolvedRenderEvent,
 			keyExtractor,
 			onPressDay,
-			onPressEvent,
+			onLongPressDay,
+			onPressEvent: handlePressEvent,
+			onLongPressEvent: handleLongPressEvent,
 			onPressMore,
-			onChangeDate,
-			freeSwipe
+			onChangeDate: handleChangeDate,
+			freeSwipe,
+			swipeEnabled
+		}) : mode === "schedule" ? /* @__PURE__ */ jsx(Agenda, {
+			events,
+			locale,
+			renderEvent: resolvedRenderEvent,
+			keyExtractor,
+			onPressEvent: handlePressEvent,
+			onLongPressEvent: handleLongPressEvent,
+			onPressDay,
+			activeDate,
+			itemSeparatorComponent
 		}) : /* @__PURE__ */ jsx(TimeGrid, {
 			mode,
+			numberOfDays,
+			weekEndsOn,
 			date,
 			events,
-			cellHeight: cellHeightProp ?? internalCellHeight,
+			cellHeight,
 			hourHeight,
 			weekStartsOn,
-			renderEvent,
+			renderEvent: resolvedRenderEvent,
 			keyExtractor,
 			scrollOffsetMinutes,
 			hourColumnWidth,
+			hideHours,
+			timeslots,
+			calendarCellStyle,
+			showWeekNumber,
+			weekNumberPrefix,
+			hourComponent,
+			showVerticalScrollIndicator,
+			verticalScrollEnabled,
+			headerComponent,
 			minHour,
 			maxHour,
 			ampm,
@@ -879,13 +1379,20 @@ function Calendar({ events, mode, date, onChangeDate, onPressEvent, onPressDay,
 			maxHourHeight,
 			showNowIndicator,
 			locale,
+			activeDate,
+			isRTL,
 			freeSwipe,
-			onPressEvent,
+			swipeEnabled,
+			onPressEvent: handlePressEvent,
+			onLongPressEvent: handleLongPressEvent,
 			onPressCell,
-			onChangeDate,
+			resetPageOnPressCell,
+			onLongPressCell,
+			onPressDateHeader,
+			onChangeDate: handleChangeDate,
 			renderHeader: renderTimeGridHeader
 		})
 	});
 }
 //#endregion
-export { Calendar, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, MonthPager, MonthView, TimeGrid, defaultTheme, getIsToday, getWeekDays, isSameCalendarDay, isWeekend, layoutDayEvents, mergeTheme, minutesIntoDay, useCalendarTheme };
+export { Agenda, Calendar, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, MonthPager, MonthView, TimeGrid, defaultTheme, getIsToday, getWeekDays, isAllDayEvent, isSameCalendarDay, isWeekend, layoutDayEvents, mergeTheme, minutesIntoDay, useCalendarTheme };