react-native-bigger-calendar 0.1.0

package/dist/index.mjs

@@ -0,0 +1,891 @@
+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 { 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 = {
+	colors: {
+		gridLine: "#E2E4E9",
+		weekendBackground: "#F6F7F9",
+		todayBackground: "#1F6FEB",
+		todayText: "#FFFFFF",
+		nowIndicator: "#E5484D",
+		text: "#1A1B1E",
+		textMuted: "#6B7280",
+		textDisabled: "#B5B9C0",
+		eventBackground: "#DCE7FF",
+		eventText: "#1A1B1E"
+	},
+	text: {
+		dayNumber: {
+			fontSize: 22,
+			fontWeight: "700"
+		},
+		weekday: {
+			fontSize: 13,
+			fontWeight: "700"
+		},
+		dateCell: {
+			fontSize: 13,
+			fontWeight: "700"
+		},
+		hourLabel: { fontSize: 12 },
+		more: {
+			fontSize: 11,
+			fontWeight: "700"
+		},
+		eventTitle: {
+			fontSize: 12,
+			fontWeight: "700"
+		}
+	},
+	todayBadgeRadius: 999
+};
+/** Deep-merge a partial theme over {@link defaultTheme}. */
+function mergeTheme(theme) {
+	if (!theme) return defaultTheme;
+	return {
+		colors: {
+			...defaultTheme.colors,
+			...theme.colors
+		},
+		text: {
+			...defaultTheme.text,
+			...theme.text
+		},
+		todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius
+	};
+}
+const CalendarThemeContext = createContext(defaultTheme);
+const CalendarThemeProvider = CalendarThemeContext.Provider;
+const useCalendarTheme = () => useContext(CalendarThemeContext);
+//#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 }) {
+	const theme = useCalendarTheme();
+	const showTime = mode !== "month";
+	return /* @__PURE__ */ jsxs(TouchableOpacity, {
+		style: [styles$3.box, { backgroundColor: theme.colors.eventBackground }],
+		onPress,
+		activeOpacity: .7,
+		accessibilityRole: "button",
+		accessibilityLabel: event.title,
+		children: [event.title ? /* @__PURE__ */ jsx(Text, {
+			style: [theme.text.eventTitle, { color: theme.colors.eventText }],
+			numberOfLines: mode === "day" ? void 0 : 1,
+			ellipsizeMode: "tail",
+			allowFontScaling: false,
+			children: event.title
+		}) : null, showTime ? /* @__PURE__ */ jsx(Text, {
+			style: [styles$3.time, { color: theme.colors.eventText }],
+			numberOfLines: 1,
+			allowFontScaling: false,
+			children: `${format(event.start, "HH:mm")} - ${format(event.end, "HH:mm")}`
+		}) : null]
+	});
+}
+const styles$3 = StyleSheet.create({
+	box: {
+		flex: 1,
+		borderRadius: 6,
+		paddingVertical: 2,
+		paddingHorizontal: 4,
+		overflow: "hidden"
+	},
+	time: { fontSize: 11 }
+});
+//#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;
+/**
+* Lay out a single day's events: events that overlap in time are split into
+* side-by-side columns. Multi-day events are clipped to the portion that falls
+* on `day` (e.g. a 23:00→01:00 event renders 23:00–24:00 on the start day and
+* 00:00–01:00 on the next). Pure — safe to call per render, never per frame.
+*/
+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 segStart = max([event.start, dayStart]);
+		const segEnd = min([event.end, nextDayStart]);
+		return {
+			event,
+			start: differenceInMinutes(segStart, dayStart) / MINUTES_PER_HOUR$1,
+			end: differenceInMinutes(segEnd, dayStart) / MINUTES_PER_HOUR$1,
+			continuesBefore: event.start < dayStart,
+			continuesAfter: event.end > nextDayStart
+		};
+	}).sort((a, b) => a.start - b.start);
+	const positioned = [];
+	let cluster = [];
+	let clusterEnd = Number.NEGATIVE_INFINITY;
+	const flushCluster = () => {
+		const columnEnds = [];
+		const columnOf = /* @__PURE__ */ new Map();
+		for (const seg of cluster) {
+			let column = columnEnds.findIndex((end) => end <= seg.start);
+			if (column === -1) {
+				column = columnEnds.length;
+				columnEnds.push(seg.end);
+			} else columnEnds[column] = seg.end;
+			columnOf.set(seg, column);
+		}
+		for (const seg of cluster) positioned.push({
+			event: seg.event,
+			startHours: seg.start,
+			durationHours: Math.max(seg.end - seg.start, MIN_DURATION_HOURS),
+			column: columnOf.get(seg) ?? 0,
+			columns: columnEnds.length,
+			continuesBefore: seg.continuesBefore,
+			continuesAfter: seg.continuesAfter
+		});
+		cluster = [];
+	};
+	for (const seg of segments) {
+		if (cluster.length > 0 && seg.start >= clusterEnd) flushCluster();
+		cluster.push(seg);
+		clusterEnd = Math.max(clusterEnd, seg.end);
+	}
+	if (cluster.length > 0) flushCluster();
+	return positioned;
+}
+/**
+* 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
+* index events by day for the month grid. Pure.
+*/
+function eventDayKeys(event) {
+	const first = startOfDay(event.start);
+	const last = startOfDay(event.end > event.start ? /* @__PURE__ */ new Date(event.end.getTime() - 1) : event.start);
+	const keys = [];
+	for (let cursor = first; cursor <= last; cursor = addDays(cursor, 1)) keys.push(cursor.toISOString());
+	return keys;
+}
+//#endregion
+//#region src/components/MonthView.tsx
+const chunkIntoWeeks = (days) => {
+	const weeks = [];
+	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 }) {
+	const theme = useCalendarTheme();
+	const RenderEventComponent = renderEvent;
+	const weeks = useMemo(() => {
+		return chunkIntoWeeks(eachDayOfInterval({
+			start: startOfWeek(startOfMonth(date), { weekStartsOn }),
+			end: endOfWeek(endOfMonth(date), { weekStartsOn })
+		}));
+	}, [date, weekStartsOn]);
+	const eventsByDay = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const event of events) for (const key of eventDayKeys(event)) {
+			const existing = map.get(key);
+			if (existing) existing.push(event);
+			else map.set(key, [event]);
+		}
+		return map;
+	}, [events]);
+	const renderDay = (day) => {
+		const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
+		const isCurrentMonth = isSameMonth(day, date);
+		const isToday = getIsToday(day);
+		const hiddenCount = dayEvents.length - maxVisibleEventCount;
+		const dateColor = isToday ? 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"}`;
+		return /* @__PURE__ */ jsxs(TouchableOpacity, {
+			style: [
+				styles$2.dayCell,
+				{ borderColor: theme.colors.gridLine },
+				isWeekend(day) && { backgroundColor: theme.colors.weekendBackground }
+			],
+			onPress: onPressDay ? () => onPressDay(day) : void 0,
+			disabled: !onPressDay,
+			accessibilityRole: onPressDay ? "button" : void 0,
+			accessibilityLabel,
+			children: [
+				/* @__PURE__ */ jsx(View, {
+					style: [styles$2.dateBadge, isToday && {
+						backgroundColor: theme.colors.todayBackground,
+						borderRadius: theme.todayBadgeRadius
+					}],
+					children: /* @__PURE__ */ jsx(Text, {
+						style: [theme.text.dateCell, { color: dateColor }],
+						allowFontScaling: false,
+						children: format(day, "d")
+					})
+				}),
+				dayEvents.slice(0, maxVisibleEventCount).map((event, index) => /* @__PURE__ */ jsx(View, {
+					style: styles$2.monthEvent,
+					children: /* @__PURE__ */ jsx(RenderEventComponent, {
+						event,
+						mode: "month",
+						onPress: () => onPressEvent(event)
+					})
+				}, keyExtractor(event, index))),
+				hiddenCount > 0 ? /* @__PURE__ */ jsx(Text, {
+					style: [
+						theme.text.more,
+						styles$2.moreLabel,
+						{ color: theme.colors.textMuted }
+					],
+					onPress: onPressMore ? () => onPressMore(dayEvents, day) : void 0,
+					accessibilityRole: "button",
+					accessibilityLabel: `Show ${hiddenCount} more events`,
+					allowFontScaling: false,
+					children: `${hiddenCount} More`
+				}) : null
+			]
+		}, day.toISOString());
+	};
+	return /* @__PURE__ */ jsx(View, {
+		style: styles$2.container,
+		children: weeks.map((week) => /* @__PURE__ */ jsx(View, {
+			style: styles$2.weekRow,
+			children: week.map((day) => renderDay(day))
+		}, week[0].toISOString()))
+	});
+}
+const MonthView = memo(MonthViewInner);
+const styles$2 = StyleSheet.create({
+	container: { flex: 1 },
+	weekRow: {
+		flex: 1,
+		flexDirection: "row"
+	},
+	dayCell: {
+		flex: 1,
+		alignItems: "center",
+		paddingTop: 4,
+		gap: 2,
+		overflow: "hidden",
+		borderTopWidth: StyleSheet.hairlineWidth,
+		borderRightWidth: StyleSheet.hairlineWidth
+	},
+	dateBadge: {
+		justifyContent: "center",
+		alignItems: "center",
+		height: 24,
+		width: 24
+	},
+	monthEvent: { width: "92%" },
+	moreLabel: { marginTop: 2 }
+});
+//#endregion
+//#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 }) {
+	const { width, height } = useWindowDimensions();
+	const listRef = useRef(null);
+	const [pageHeight, setPageHeight] = useState(height);
+	const [anchorDate] = useState(date);
+	const anchor = useMemo(() => startOfMonth(anchorDate), [anchorDate]);
+	const monthDates = useMemo(() => Array.from({ length: 121 }, (_, i) => addMonths(anchor, i - PAGE_WINDOW$1)), [anchor]);
+	const activeIndex = useCallback((target) => differenceInCalendarMonths(startOfMonth(target), anchor) + PAGE_WINDOW$1, [anchor])(date);
+	const viewedIndexRef = useRef(activeIndex);
+	const handleViewableItemsChanged = useCallback((info) => {
+		const settled = info.viewableItems.find((token) => token.isViewable);
+		if (settled?.index == null || settled.index === viewedIndexRef.current) return;
+		viewedIndexRef.current = settled.index;
+		if (settled.item) onChangeDate(settled.item);
+	}, [onChangeDate]);
+	useEffect(() => {
+		if (activeIndex === viewedIndexRef.current) return;
+		viewedIndexRef.current = activeIndex;
+		listRef.current?.scrollToIndex({
+			index: activeIndex,
+			animated: false
+		});
+	}, [activeIndex]);
+	const snapToIndices = useMemo(() => monthDates.map((_, index) => index), [monthDates]);
+	const keyExtractorList = useCallback((item) => item.toISOString(), []);
+	const getFixedItemSize = useCallback(() => width, [width]);
+	const renderItem = useCallback(({ item }) => /* @__PURE__ */ jsx(View, {
+		style: {
+			width,
+			height: pageHeight
+		},
+		children: /* @__PURE__ */ jsx(MonthView, {
+			date: item,
+			events,
+			maxVisibleEventCount,
+			weekStartsOn,
+			renderEvent,
+			keyExtractor,
+			onPressDay,
+			onPressEvent,
+			onPressMore
+		})
+	}), [
+		width,
+		pageHeight,
+		events,
+		maxVisibleEventCount,
+		weekStartsOn,
+		renderEvent,
+		keyExtractor,
+		onPressDay,
+		onPressEvent,
+		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)
+	});
+}
+const MonthPager = memo(MonthPagerInner);
+const styles$1 = StyleSheet.create({
+	pager: { flex: 1 },
+	pagerList: { flex: 1 }
+});
+//#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;
+const DEFAULT_MIN_HOUR_HEIGHT = 32;
+const DEFAULT_MAX_HOUR_HEIGHT = 160;
+const DEFAULT_HOUR_COLUMN_WIDTH = 50;
+const MIN_EVENT_HEIGHT = 32;
+const HOUR_LABEL_TOP_INSET = 12;
+const NOW_TICK_MS = 6e4;
+function useNow(enabled) {
+	const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+	useEffect(() => {
+		if (!enabled) return;
+		setNow(/* @__PURE__ */ new Date());
+		const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), NOW_TICK_MS);
+		return () => clearInterval(id);
+	}, [enabled]);
+	return now;
+}
+function formatHourLabel(hour, ampm) {
+	if (!ampm) return String(hour);
+	const period = hour < 12 ? "AM" : "PM";
+	return `${hour % 12 === 0 ? 12 : hour % 12} ${period}`;
+}
+function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, mode, renderEvent, onPress }) {
+	const RenderEventComponent = renderEvent;
+	const boxHeight = useDerivedValue(() => Math.max(positioned.durationHours * cellHeight.value, MIN_EVENT_HEIGHT), [positioned.durationHours]);
+	const boxStyle = useAnimatedStyle(() => ({
+		top: (positioned.startHours - minHour) * cellHeight.value,
+		height: boxHeight.value
+	}), [
+		positioned.startHours,
+		positioned.durationHours,
+		minHour
+	]);
+	const handlePress = () => onPress(positioned.event);
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles.eventBox,
+			{
+				left,
+				width
+			},
+			boxStyle
+		],
+		children: /* @__PURE__ */ jsx(RenderEventComponent, {
+			event: positioned.event,
+			mode,
+			boxHeight,
+			continuesBefore: positioned.continuesBefore,
+			continuesAfter: positioned.continuesAfter,
+			onPress: handlePress
+		})
+	});
+}
+const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label }) => {
+	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, {
+			style: [
+				theme.text.hourLabel,
+				styles.hourLabel,
+				{
+					width: hourColumnWidth,
+					color: theme.colors.textMuted
+				}
+			],
+			allowFontScaling: false,
+			children: label
+		}), /* @__PURE__ */ jsx(View, { style: [styles.hourLine, { backgroundColor: theme.colors.gridLine }] })]
+	});
+};
+const NowIndicator = ({ cellHeight, nowHours, minHour, left, color }) => {
+	const animatedStyle = useAnimatedStyle(() => ({ top: (nowHours - minHour) * cellHeight.value }), [nowHours, minHour]);
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: [
+			styles.nowIndicator,
+			{
+				left,
+				backgroundColor: color
+			},
+			animatedStyle
+		],
+		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 }) {
+	const theme = useCalendarTheme();
+	const { width } = useWindowDimensions();
+	const scrollRef = useAnimatedRef();
+	const heightSource = isActive ? cellHeight : committedCellHeight;
+	const scrollHandler = useAnimatedScrollHandler((event) => {
+		if (isActive) scrollY.value = event.contentOffset.y;
+	});
+	useAnimatedReaction(() => scrollY.value, (current, previous) => {
+		if (!isActive && current !== previous) scrollTo(scrollRef, 0, current, false);
+	});
+	const days = useMemo(() => mode === "week" ? getWeekDays(date, weekStartsOn) : [date], [
+		mode,
+		date,
+		weekStartsOn
+	]);
+	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 { locationX, locationY } = event.nativeEvent;
+		const day = days[days.length === 1 ? 0 : Math.floor(locationX / dayWidth)];
+		if (!day) return;
+		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);
+	};
+	const hoursRange = useMemo(() => Array.from({ length: maxHour - minHour }, (_, index) => minHour + index), [minHour, maxHour]);
+	const now = useNow(showNowIndicator && isActive);
+	const nowDayIndex = days.findIndex((day) => getIsToday(day));
+	const nowHours = (getHours(now) * MINUTES_PER_HOUR + getMinutes(now)) / MINUTES_PER_HOUR;
+	const nowInWindow = nowHours >= minHour && nowHours <= maxHour;
+	const fullHeightStyle = useAnimatedStyle(() => ({ height: (maxHour - minHour) * heightSource.value }), [
+		minHour,
+		maxHour,
+		heightSource
+	]);
+	const pinchStartCellHeight = useSharedValue(hourHeight);
+	const zoomGesture = useMemo(() => {
+		const pinch = Gesture.Pinch().onStart(() => {
+			pinchStartCellHeight.value = cellHeight.value;
+		}).onUpdate((event) => {
+			cellHeight.value = Math.min(maxHourHeight, Math.max(minHourHeight, pinchStartCellHeight.value * event.scale));
+		}).onEnd(() => {
+			committedCellHeight.value = cellHeight.value;
+		});
+		return Gesture.Simultaneous(pinch, Gesture.Native());
+	}, [
+		cellHeight,
+		committedCellHeight,
+		pinchStartCellHeight,
+		minHourHeight,
+		maxHourHeight
+	]);
+	return /* @__PURE__ */ jsx(View, {
+		style: styles.container,
+		children: /* @__PURE__ */ jsx(GestureDetector, {
+			gesture: zoomGesture,
+			children: /* @__PURE__ */ jsx(Animated.ScrollView, {
+				ref: scrollRef,
+				showsVerticalScrollIndicator: true,
+				onScroll: scrollHandler,
+				scrollEventThrottle: 16,
+				contentContainerStyle: { paddingTop: HOUR_LABEL_TOP_INSET },
+				contentOffset: {
+					x: 0,
+					y: Math.max(0, scrollOffsetMinutes / MINUTES_PER_HOUR - minHour) * hourHeight
+				},
+				children: /* @__PURE__ */ jsxs(Animated.View, {
+					style: [styles.content, fullHeightStyle],
+					children: [
+						onPressCell ? /* @__PURE__ */ jsx(Pressable, {
+							style: [styles.cellPressLayer, { left: hourColumnWidth }],
+							onPress: handleBackgroundPress,
+							importantForAccessibility: "no",
+							accessibilityElementsHidden: true
+						}) : null,
+						days.map((day, dayIndex) => isWeekend(day) ? /* @__PURE__ */ jsx(Animated.View, {
+							style: [
+								styles.weekendColumn,
+								{ backgroundColor: theme.colors.weekendBackground },
+								{
+									left: dayLeft(dayIndex),
+									width: dayWidth
+								},
+								fullHeightStyle
+							],
+							pointerEvents: "none"
+						}, `weekend-${day.toISOString()}`) : null),
+						days.map((day, dayIndex) => /* @__PURE__ */ jsx(Animated.View, {
+							style: [
+								styles.daySeparator,
+								{ backgroundColor: theme.colors.gridLine },
+								{ left: dayLeft(dayIndex) },
+								fullHeightStyle
+							],
+							pointerEvents: "none"
+						}, `separator-${day.toISOString()}`)),
+						hoursRange.map((hour) => /* @__PURE__ */ jsx(HourRow, {
+							hour,
+							minHour,
+							cellHeight: heightSource,
+							hourColumnWidth,
+							label: formatHourLabel(hour, ampm)
+						}, hour)),
+						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, {
+								positioned,
+								cellHeight: heightSource,
+								minHour,
+								left: dayLeft(dayIndex) + positioned.column * columnWidth,
+								width: columnWidth,
+								mode,
+								renderEvent,
+								onPress: onPressEvent
+							}, keyExtractor(positioned.event, eventIndex));
+						})),
+						showNowIndicator && nowDayIndex >= 0 && nowInWindow ? /* @__PURE__ */ jsx(NowIndicator, {
+							cellHeight: heightSource,
+							nowHours,
+							minHour,
+							left: dayLeft(nowDayIndex),
+							color: theme.colors.nowIndicator
+						}) : null
+					]
+				})
+			})
+		})
+	});
+}
+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 }) {
+	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 { width, height } = useWindowDimensions();
+	const listRef = useRef(null);
+	const [pageHeight, setPageHeight] = useState(height);
+	const step = mode === "week" ? WEEK_VIEW_STEP : DAY_VIEW_STEP;
+	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,
+		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;
+	}, [
+		anchor,
+		mode,
+		step,
+		weekStartsOn
+	])(date);
+	const viewedIndexRef = useRef(activeIndex);
+	const headerDays = useMemo(() => mode === "week" ? getWeekDays(date, weekStartsOn) : [date], [
+		mode,
+		date,
+		weekStartsOn
+	]);
+	const handleViewableItemsChanged = useCallback((info) => {
+		const settled = info.viewableItems.find((token) => token.isViewable);
+		if (settled?.index == null || settled.index === viewedIndexRef.current) return;
+		viewedIndexRef.current = settled.index;
+		if (settled.item) onChangeDate(settled.item);
+	}, [onChangeDate]);
+	useEffect(() => {
+		if (activeIndex === viewedIndexRef.current) return;
+		viewedIndexRef.current = activeIndex;
+		listRef.current?.scrollToIndex({
+			index: activeIndex,
+			animated: false
+		});
+	}, [activeIndex]);
+	const snapToIndices = useMemo(() => pageDates.map((_, index) => index), [pageDates]);
+	const keyExtractorList = useCallback((item) => item.toISOString(), []);
+	const getFixedItemSize = useCallback(() => width, [width]);
+	const renderItem = useCallback(({ item, index }) => /* @__PURE__ */ jsx(View, {
+		style: {
+			width,
+			height: pageHeight
+		},
+		children: /* @__PURE__ */ jsx(TimetablePage, {
+			mode,
+			date: item,
+			events,
+			cellHeight,
+			hourHeight,
+			committedCellHeight,
+			scrollY,
+			isActive: index === activeIndex,
+			scrollOffsetMinutes,
+			weekStartsOn,
+			hourColumnWidth,
+			minHour: clampedMinHour,
+			maxHour: clampedMaxHour,
+			ampm,
+			minHourHeight,
+			maxHourHeight,
+			showNowIndicator,
+			renderEvent,
+			keyExtractor,
+			onPressEvent,
+			onPressCell
+		})
+	}), [
+		width,
+		pageHeight,
+		mode,
+		events,
+		cellHeight,
+		hourHeight,
+		committedCellHeight,
+		scrollY,
+		activeIndex,
+		scrollOffsetMinutes,
+		weekStartsOn,
+		hourColumnWidth,
+		clampedMinHour,
+		clampedMaxHour,
+		ampm,
+		minHourHeight,
+		maxHourHeight,
+		showNowIndicator,
+		renderEvent,
+		keyExtractor,
+		onPressEvent,
+		onPressCell
+	]);
+	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)
+		})]
+	});
+}
+const TimeGrid = memo(TimeGridInner);
+const DefaultHeader = ({ days, mode, width, hourColumnWidth, locale }) => {
+	const dayWidth = mode === "week" ? (width - hourColumnWidth) / days.length : width;
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles.headerRow,
+		children: [mode === "week" ? /* @__PURE__ */ jsx(View, { style: { width: hourColumnWidth } }) : null, days.map((day) => /* @__PURE__ */ jsx(DayHeader, {
+			day,
+			mode,
+			width: dayWidth,
+			locale
+		}, day.toISOString()))]
+	});
+};
+const DayHeader = ({ day, mode, width, locale }) => {
+	const theme = useCalendarTheme();
+	const isToday = getIsToday(day);
+	const badgeSize = mode === "day" ? 44 : 32;
+	return /* @__PURE__ */ jsxs(View, {
+		style: [styles.dayHeader, {
+			width,
+			gap: mode === "day" ? 4 : 2
+		}],
+		children: [/* @__PURE__ */ jsx(View, {
+			style: [styles.dayHeaderBadge, isToday && {
+				backgroundColor: theme.colors.todayBackground,
+				borderRadius: 999,
+				width: badgeSize,
+				height: badgeSize
+			}],
+			children: /* @__PURE__ */ jsx(Text, {
+				style: [theme.text.dayNumber, { color: isToday ? theme.colors.todayText : theme.colors.text }],
+				allowFontScaling: false,
+				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
+				children: day.getDate()
+			})
+		}), /* @__PURE__ */ jsx(Text, {
+			style: [theme.text.weekday, { color: theme.colors.text }],
+			allowFontScaling: false,
+			children: day.toLocaleDateString(locale, { weekday: "short" })
+		})]
+	});
+};
+const styles = StyleSheet.create({
+	pager: { flex: 1 },
+	pagerList: { flex: 1 },
+	container: { flex: 1 },
+	headerRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingBottom: 8
+	},
+	dayHeader: { alignItems: "center" },
+	dayHeaderBadge: {
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	content: {
+		width: "100%",
+		position: "relative"
+	},
+	cellPressLayer: {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		right: 0
+	},
+	weekendColumn: {
+		position: "absolute",
+		top: 0
+	},
+	daySeparator: {
+		position: "absolute",
+		top: 0,
+		width: StyleSheet.hairlineWidth
+	},
+	hourRow: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	hourLabel: {
+		marginTop: -8,
+		textAlign: "center"
+	},
+	hourLine: {
+		flex: 1,
+		height: StyleSheet.hairlineWidth
+	},
+	eventBox: {
+		position: "absolute",
+		overflow: "hidden"
+	},
+	nowIndicator: {
+		position: "absolute",
+		right: 0,
+		height: 2
+	}
+});
+//#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 }) {
+	const mergedTheme = useMemo(() => mergeTheme(theme), [theme]);
+	const internalCellHeight = useSharedValue(hourHeight);
+	return /* @__PURE__ */ jsx(CalendarThemeProvider, {
+		value: mergedTheme,
+		children: mode === "month" ? /* @__PURE__ */ jsx(MonthPager, {
+			date,
+			events,
+			maxVisibleEventCount,
+			weekStartsOn,
+			renderEvent,
+			keyExtractor,
+			onPressDay,
+			onPressEvent,
+			onPressMore,
+			onChangeDate,
+			freeSwipe
+		}) : /* @__PURE__ */ jsx(TimeGrid, {
+			mode,
+			date,
+			events,
+			cellHeight: cellHeightProp ?? internalCellHeight,
+			hourHeight,
+			weekStartsOn,
+			renderEvent,
+			keyExtractor,
+			scrollOffsetMinutes,
+			hourColumnWidth,
+			minHour,
+			maxHour,
+			ampm,
+			minHourHeight,
+			maxHourHeight,
+			showNowIndicator,
+			locale,
+			freeSwipe,
+			onPressEvent,
+			onPressCell,
+			onChangeDate,
+			renderHeader: renderTimeGridHeader
+		})
+	});
+}
+//#endregion
+export { Calendar, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, DefaultEvent, MonthPager, MonthView, TimeGrid, defaultTheme, getIsToday, getWeekDays, isSameCalendarDay, isWeekend, layoutDayEvents, mergeTheme, minutesIntoDay, useCalendarTheme };