react-native-bigger-calendar 0.1.0 → 0.2.1

package/src/components/TimeGrid.tsx

@@ -7,8 +7,11 @@ import {
 import {
   addDays,
   differenceInCalendarDays,
+  format,
   getHours,
+  getISOWeek,
   getMinutes,
+  type Locale,
   startOfDay,
   startOfWeek,
 } from 'date-fns';
@@ -17,9 +20,11 @@ import {
   type GestureResponderEvent,
   Pressable,
   StyleSheet,
+  type StyleProp,
   Text,
   useWindowDimensions,
   View,
+  type ViewStyle,
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -38,16 +43,15 @@ import type {
   CalendarMode,
   EventKeyExtractor,
   RenderEvent,
+  TimeGridMode,
   WeekStartsOn,
 } from '../types';
-import { getIsToday, getWeekDays, isWeekend } from '../utils/dates';
+import { getIsToday, getViewDays, isSameCalendarDay, isWeekend, viewDayCount } from '../utils/dates';
 import { layoutDayEvents, type PositionedEvent } from '../utils/layout';
+import { AllDayLane } from './AllDayLane';
 
 const MINUTES_PER_HOUR = 60;
 const HOURS_PER_DAY = 24;
-// Days (day view) or weeks (week view) to step when paging to an adjacent page.
-const DAY_VIEW_STEP = 1;
-const WEEK_VIEW_STEP = 7;
 // Steps rendered either side of the current page. LegendList virtualises, so
 // only a few mount at once; a wide window means the user effectively never runs
 // out of pages to swipe. Items are keyed by date and never recycled.
@@ -99,6 +103,7 @@ type AnimatedEventBoxProps<T> = {
   mode: CalendarMode;
   renderEvent: RenderEvent<T>;
   onPress: (event: CalendarEvent<T>) => void;
+  onLongPress?: (event: CalendarEvent<T>) => void;
 };
 
 function AnimatedEventBox<T>({
@@ -110,6 +115,7 @@ function AnimatedEventBox<T>({
   mode,
   renderEvent,
   onPress,
+  onLongPress,
 }: AnimatedEventBoxProps<T>) {
   const RenderEventComponent = renderEvent;
   // Live pixel height of the box, driven on the UI thread by the shared
@@ -130,6 +136,7 @@ function AnimatedEventBox<T>({
   );
 
   const handlePress = () => onPress(positioned.event);
+  const handleLongPress = onLongPress ? () => onLongPress(positioned.event) : undefined;
 
   return (
     <Animated.View style={[styles.eventBox, { left, width }, boxStyle]}>
@@ -140,20 +147,34 @@ function AnimatedEventBox<T>({
         continuesBefore={positioned.continuesBefore}
         continuesAfter={positioned.continuesAfter}
         onPress={handlePress}
+        onLongPress={handleLongPress}
       />
     </Animated.View>
   );
 }
 
+/** Replace the hour-axis label. Receives the hour (0–23) and the `ampm` flag. */
+export type HourRenderer = (hour: number, ampm: boolean) => React.ReactNode;
+
 type HourRowProps = {
   hour: number;
   minHour: number;
   cellHeight: SharedValue<number>;
   hourColumnWidth: number;
   label: string;
+  ampm: boolean;
+  hourComponent?: HourRenderer;
 };
 
-const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label }: HourRowProps) => {
+const HourRow = ({
+  hour,
+  minHour,
+  cellHeight,
+  hourColumnWidth,
+  label,
+  ampm,
+  hourComponent,
+}: HourRowProps) => {
   const theme = useCalendarTheme();
   // Position via `top` (a layout prop), not a transform. The per-row layout pass
   // as cellHeight animates keeps the ScrollView's content size in sync while
@@ -165,21 +186,48 @@ const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label }: HourRowP
 
   return (
     <Animated.View style={[styles.hourRow, animatedStyle]} pointerEvents="none">
-      <Text
-        style={[
-          theme.text.hourLabel,
-          styles.hourLabel,
-          { width: hourColumnWidth, color: theme.colors.textMuted },
-        ]}
-        allowFontScaling={false}
-      >
-        {label}
-      </Text>
+      {hourComponent ? (
+        <View style={{ width: hourColumnWidth }}>{hourComponent(hour, ampm)}</View>
+      ) : (
+        <Text
+          style={[
+            theme.text.hourLabel,
+            styles.hourLabel,
+            { width: hourColumnWidth, color: theme.colors.textMuted },
+          ]}
+          allowFontScaling={false}
+        >
+          {label}
+        </Text>
+      )}
       <View style={[styles.hourLine, { backgroundColor: theme.colors.gridLine }]} />
     </Animated.View>
   );
 };
 
+type TimeslotLineProps = {
+  hour: number;
+  minHour: number;
+  fraction: number;
+  cellHeight: SharedValue<number>;
+  hourColumnWidth: number;
+};
+
+// A faint divider inside an hour row, marking a sub-hour slot (e.g. half hours).
+const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth }: TimeslotLineProps) => {
+  const theme = useCalendarTheme();
+  const animatedStyle = useAnimatedStyle(
+    () => ({ top: (hour - minHour + fraction) * cellHeight.value }),
+    [hour, minHour, fraction],
+  );
+  return (
+    <Animated.View
+      style={[styles.timeslotLine, { left: hourColumnWidth, backgroundColor: theme.colors.gridLine }, animatedStyle]}
+      pointerEvents="none"
+    />
+  );
+};
+
 type NowIndicatorProps = {
   cellHeight: SharedValue<number>;
   nowHours: number;
@@ -203,7 +251,8 @@ const NowIndicator = ({ cellHeight, nowHours, minHour, left, color }: NowIndicat
 };
 
 type TimetablePageProps<T> = {
-  mode: 'day' | 'week';
+  mode: TimeGridMode;
+  numberOfDays: number;
   date: Date;
   events: CalendarEvent<T>[];
   cellHeight: SharedValue<number>;
@@ -216,17 +265,26 @@ type TimetablePageProps<T> = {
   isActive: boolean;
   scrollOffsetMinutes: number;
   weekStartsOn: WeekStartsOn;
+  weekEndsOn?: WeekStartsOn;
   hourColumnWidth: number;
   minHour: number;
   maxHour: number;
   ampm: boolean;
+  timeslots: number;
+  isRTL: boolean;
+  showVerticalScrollIndicator: boolean;
+  verticalScrollEnabled: boolean;
+  hourComponent?: HourRenderer;
+  calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   minHourHeight: number;
   maxHourHeight: number;
   showNowIndicator: boolean;
   renderEvent: RenderEvent<T>;
   keyExtractor: EventKeyExtractor<T>;
   onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
   onPressCell?: (date: Date) => void;
+  onLongPressCell?: (date: Date) => void;
 };
 
 // A single date's grid: the pinch-zoomable, vertically-scrolling time column.
@@ -234,6 +292,7 @@ type TimetablePageProps<T> = {
 // next dates are ready to drag into view.
 function TimetablePageInner<T>({
   mode,
+  numberOfDays,
   date,
   events,
   cellHeight,
@@ -243,17 +302,26 @@ function TimetablePageInner<T>({
   isActive,
   scrollOffsetMinutes,
   weekStartsOn,
+  weekEndsOn,
   hourColumnWidth,
   minHour,
   maxHour,
   ampm,
+  timeslots,
+  isRTL,
+  showVerticalScrollIndicator,
+  verticalScrollEnabled,
+  hourComponent,
+  calendarCellStyle,
   minHourHeight,
   maxHourHeight,
   showNowIndicator,
   renderEvent,
   keyExtractor,
   onPressEvent,
+  onLongPressEvent,
   onPressCell,
+  onLongPressCell,
 }: TimetablePageProps<T>) {
   const theme = useCalendarTheme();
   const { width } = useWindowDimensions();
@@ -282,8 +350,8 @@ function TimetablePageInner<T>({
   );
 
   const days = useMemo(
-    () => (mode === 'week' ? getWeekDays(date, weekStartsOn) : [date]),
-    [mode, date, weekStartsOn],
+    () => getViewDays(mode, date, weekStartsOn, numberOfDays, isRTL, weekEndsOn),
+    [mode, date, weekStartsOn, numberOfDays, isRTL, weekEndsOn],
   );
 
   const dayWidth = (width - hourColumnWidth) / days.length;
@@ -296,17 +364,24 @@ function TimetablePageInner<T>({
 
   // Map a tap on empty grid space back to the date+time it represents. Reads the
   // live row height on the JS thread to convert the touch Y into minutes.
-  const handleBackgroundPress = (event: GestureResponderEvent) => {
-    if (!onPressCell) return;
+  const cellDateFromTouch = (event: GestureResponderEvent): Date | null => {
     const { locationX, locationY } = event.nativeEvent;
     const dayIndex = days.length === 1 ? 0 : Math.floor(locationX / dayWidth);
     const day = days[dayIndex];
-    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: GestureResponderEvent) => {
+    const date = onPressCell && cellDateFromTouch(event);
+    if (date) onPressCell?.(date);
+  };
+  const handleBackgroundLongPress = (event: GestureResponderEvent) => {
+    const date = onLongPressCell && cellDateFromTouch(event);
+    if (date) onLongPressCell?.(date);
   };
 
   // The hours (rows/labels) visible in the window [minHour, maxHour).
@@ -354,10 +429,22 @@ function TimetablePageInner<T>({
 
   return (
     <View style={styles.container}>
+      <AllDayLane
+        days={days}
+        events={events}
+        mode={mode}
+        hourColumnWidth={hourColumnWidth}
+        dayWidth={dayWidth}
+        renderEvent={renderEvent}
+        keyExtractor={keyExtractor}
+        onPressEvent={onPressEvent}
+        onLongPressEvent={onLongPressEvent}
+      />
       <GestureDetector gesture={zoomGesture}>
         <Animated.ScrollView
           ref={scrollRef}
-          showsVerticalScrollIndicator
+          showsVerticalScrollIndicator={showVerticalScrollIndicator}
+          scrollEnabled={verticalScrollEnabled}
           onScroll={scrollHandler}
           scrollEventThrottle={16}
           contentContainerStyle={{ paddingTop: HOUR_LABEL_TOP_INSET }}
@@ -367,13 +454,14 @@ function TimetablePageInner<T>({
           }}
         >
           <Animated.View style={[styles.content, fullHeightStyle]}>
-            {onPressCell ? (
+            {onPressCell || onLongPressCell ? (
               // Behind the events, so empty-space taps create while event taps
               // still hit their box. Hidden from screen readers (a convenience
               // gesture, not the primary create path).
               <Pressable
                 style={[styles.cellPressLayer, { left: hourColumnWidth }]}
-                onPress={handleBackgroundPress}
+                onPress={onPressCell ? handleBackgroundPress : undefined}
+                onLongPress={onLongPressCell ? handleBackgroundLongPress : undefined}
                 importantForAccessibility="no"
                 accessibilityElementsHidden
               />
@@ -394,6 +482,24 @@ function TimetablePageInner<T>({
               ) : null,
             )}
 
+            {calendarCellStyle
+              ? days.map((day, dayIndex) => {
+                  const cellStyle = calendarCellStyle(day);
+                  return cellStyle ? (
+                    <Animated.View
+                      key={`cell-${day.toISOString()}`}
+                      style={[
+                        styles.weekendColumn,
+                        { left: dayLeft(dayIndex), width: dayWidth },
+                        cellStyle,
+                        fullHeightStyle,
+                      ]}
+                      pointerEvents="none"
+                    />
+                  ) : null;
+                })
+              : null}
+
             {days.map((day, dayIndex) => (
               <Animated.View
                 key={`separator-${day.toISOString()}`}
@@ -415,9 +521,26 @@ function TimetablePageInner<T>({
                 cellHeight={heightSource}
                 hourColumnWidth={hourColumnWidth}
                 label={formatHourLabel(hour, ampm)}
+                ampm={ampm}
+                hourComponent={hourComponent}
               />
             ))}
 
+            {timeslots > 1
+              ? hoursRange.flatMap((hour) =>
+                  Array.from({ length: timeslots - 1 }, (_, i) => (
+                    <TimeslotLine
+                      key={`slot-${hour}-${i}`}
+                      hour={hour}
+                      minHour={minHour}
+                      fraction={(i + 1) / timeslots}
+                      cellHeight={heightSource}
+                      hourColumnWidth={hourColumnWidth}
+                    />
+                  )),
+                )
+              : null}
+
             {dayLayouts.flatMap((layout, dayIndex) =>
               layout
                 // Skip events that fall entirely outside the [minHour, maxHour) window.
@@ -428,7 +551,10 @@ function TimetablePageInner<T>({
                   const columnWidth = dayWidth / positioned.columns;
                   return (
                     <AnimatedEventBox
-                      key={keyExtractor(positioned.event, eventIndex)}
+                      // Prefix with the day so a multi-day event's per-day segments
+                      // (which share the same event key) stay unique across the
+                      // flattened list of all days' boxes.
+                      key={`${dayIndex}:${keyExtractor(positioned.event, eventIndex)}`}
                       positioned={positioned}
                       cellHeight={heightSource}
                       minHour={minHour}
@@ -437,6 +563,7 @@ function TimetablePageInner<T>({
                       mode={mode}
                       renderEvent={renderEvent}
                       onPress={onPressEvent}
+                      onLongPress={onLongPressEvent}
                     />
                   );
                 }),
@@ -461,7 +588,15 @@ function TimetablePageInner<T>({
 const TimetablePage = memo(TimetablePageInner) as typeof TimetablePageInner;
 
 export type TimeGridProps<T> = {
-  mode: 'day' | 'week';
+  mode: TimeGridMode;
+  /** Day columns to show in `custom` mode. Ignored by day/3days/week. Default 1. */
+  numberOfDays?: number;
+  /**
+   * Last weekday of a `custom` partial-week view (0–6). When set, `custom` shows
+   * `weekStartsOn`…`weekEndsOn` of `date`'s week and pages by week, taking
+   * precedence over `numberOfDays`. Ignored by other modes.
+   */
+  weekEndsOn?: WeekStartsOn;
   date: Date;
   events: CalendarEvent<T>[];
   cellHeight: SharedValue<number>;
@@ -472,19 +607,49 @@ export type TimeGridProps<T> = {
   keyExtractor: EventKeyExtractor<T>;
   scrollOffsetMinutes?: number;
   hourColumnWidth?: number;
+  /** Hide the left hour-axis column (lines stay, labels/gutter go). Default false. */
+  hideHours?: boolean;
+  /** Sub-hour divider lines per hour (e.g. 2 = half-hours). Default 1 (none). */
+  timeslots?: number;
+  /** Per-date style merged onto each day column. */
+  calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
+  /** Show the ISO week number in the header gutter. Default false. */
+  showWeekNumber?: boolean;
+  /** Element rendered between the day header and the grid. */
+  headerComponent?: React.ReactNode;
   /** First hour shown (0–23). Default 0. */
   minHour?: number;
   /** Last hour shown, exclusive (1–24). Default 24. */
   maxHour?: number;
   /** Show hour labels in 12-hour AM/PM form. Default false (24h). */
   ampm?: boolean;
+  /** Reverse day-column order (right-to-left). Default false. */
+  isRTL?: boolean;
   minHourHeight?: number;
   maxHourHeight?: number;
   showNowIndicator?: boolean;
-  locale?: string;
+  locale?: Locale;
   freeSwipe?: boolean;
+  /** Allow swiping between pages. Default true. */
+  swipeEnabled?: boolean;
+  /** Show the vertical scroll indicator on the time grid. Default true. */
+  showVerticalScrollIndicator?: boolean;
+  /** Allow vertical scrolling of the time grid. Default true. */
+  verticalScrollEnabled?: boolean;
+  /** Prefix for the week-number label (e.g. "W"). Default "W". */
+  weekNumberPrefix?: string;
+  /** Replace the hour-axis label. Receives the hour (0–23) and `ampm`. */
+  hourComponent?: HourRenderer;
+  /** Highlight this date in the header instead of the real "today". */
+  activeDate?: Date;
+  /** After an empty-cell press, snap the pager back to the active page. Default false. */
+  resetPageOnPressCell?: boolean;
   onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
   onPressCell?: (date: Date) => void;
+  onLongPressCell?: (date: Date) => void;
+  /** Tap a day's column header (default header only). */
+  onPressDateHeader?: (date: Date) => void;
   onChangeDate: (date: Date) => void;
   /** Optional header above the grid (e.g. weekday labels). Rendered full-width. */
   renderHeader?: (days: Date[]) => React.ReactNode;
@@ -492,6 +657,8 @@ export type TimeGridProps<T> = {
 
 function TimeGridInner<T>({
   mode,
+  numberOfDays = 1,
+  weekEndsOn,
   date,
   events,
   cellHeight,
@@ -500,30 +667,57 @@ function TimeGridInner<T>({
   renderEvent,
   keyExtractor,
   scrollOffsetMinutes = 0,
-  hourColumnWidth = DEFAULT_HOUR_COLUMN_WIDTH,
+  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,
 }: TimeGridProps<T>) {
   // Guard against an inverted/out-of-range window so the grid never collapses.
   const clampedMinHour = Math.max(0, Math.min(minHour, HOURS_PER_DAY - 1));
   const clampedMaxHour = Math.max(clampedMinHour + 1, Math.min(maxHour, HOURS_PER_DAY));
+  // Collapse the hour gutter to zero when hours are hidden.
+  const hourColumnWidth = hideHours ? 0 : hourColumnWidthProp;
 
   const { width, height } = useWindowDimensions();
   const listRef = useRef<LegendListRef>(null);
   // Horizontal list items need an explicit cross-axis height; seed it with the
   // window height (so it renders immediately and in tests) and refine on layout.
   const [pageHeight, setPageHeight] = useState(height);
-  const step = mode === 'week' ? WEEK_VIEW_STEP : DAY_VIEW_STEP;
+  // The list must remount exactly once — when the real height replaces the
+  // window-height seed — or it keeps the oversized seed and clips. It must NOT
+  // remount on later height changes (e.g. a taller day header vs a shorter week
+  // header on a mode switch): a remount blanks the visible page for a frame.
+  const [measured, setMeasured] = useState(false);
+  // Week-anchored modes page by a full week and align pages to the week start:
+  // `week`, and `custom` when a `weekEndsOn` defines a partial-week span.
+  const weekAnchored = mode === 'week' || (mode === 'custom' && weekEndsOn != null);
+  // Days advanced per page: a full week when week-anchored, else the column count.
+  const step = weekAnchored ? 7 : viewDayCount(mode, numberOfDays);
   // Shared vertical scroll offset so every mounted page stays aligned. Seeded
   // from the numeric hourHeight rather than reading cellHeight.value (which
   // would warn about reading a shared value during render).
@@ -540,8 +734,8 @@ function TimeGridInner<T>({
   const [anchorDate] = useState(date);
   const anchor = useMemo(
     () =>
-      mode === 'week' ? startOfWeek(anchorDate, { weekStartsOn }) : startOfDay(anchorDate),
-    [mode, anchorDate, weekStartsOn],
+      weekAnchored ? startOfWeek(anchorDate, { weekStartsOn }) : startOfDay(anchorDate),
+    [weekAnchored, anchorDate, weekStartsOn],
   );
   const pageDates = useMemo(
     () =>
@@ -553,10 +747,12 @@ function TimeGridInner<T>({
   const indexOfDate = useCallback(
     (target: Date) => {
       const aligned =
-        mode === 'week' ? startOfWeek(target, { weekStartsOn }) : startOfDay(target);
-      return Math.round(differenceInCalendarDays(aligned, anchor) / step) + PAGE_WINDOW;
+        weekAnchored ? startOfWeek(target, { weekStartsOn }) : startOfDay(target);
+      // Floor so an arbitrary date lands on the page whose range contains it
+      // (exact for day/week, where dates are already page-aligned).
+      return Math.floor(differenceInCalendarDays(aligned, anchor) / step) + PAGE_WINDOW;
     },
-    [anchor, mode, step, weekStartsOn],
+    [anchor, weekAnchored, step, weekStartsOn],
   );
 
   // The committed date's page is the centred/active one. `viewedIndexRef` tracks
@@ -564,11 +760,12 @@ function TimeGridInner<T>({
   const activeIndex = indexOfDate(date);
   const viewedIndexRef = useRef(activeIndex);
 
-  // Header days track the committed date and render outside the list, so a swipe
-  // never flashes another day's label.
+  // Header days track the active page (page-aligned), so they always match the
+  // columns below and a swipe never flashes another day's label.
   const headerDays = useMemo(
-    () => (mode === 'week' ? getWeekDays(date, weekStartsOn) : [date]),
-    [mode, date, weekStartsOn],
+    () =>
+      getViewDays(mode, pageDates[activeIndex] ?? date, weekStartsOn, numberOfDays, isRTL, weekEndsOn),
+    [mode, pageDates, activeIndex, date, weekStartsOn, numberOfDays, isRTL, weekEndsOn],
   );
 
   const handleViewableItemsChanged = useCallback(
@@ -589,6 +786,17 @@ function TimeGridInner<T>({
     listRef.current?.scrollToIndex({ index: activeIndex, animated: false });
   }, [activeIndex]);
 
+  // Optionally snap the pager back to the active page after an empty-cell press
+  // (so tapping a far-swiped page returns to the committed date).
+  const handlePressCell = useMemo(() => {
+    if (!onPressCell) return undefined;
+    if (!resetPageOnPressCell) return onPressCell;
+    return (cellDate: Date) => {
+      onPressCell(cellDate);
+      listRef.current?.scrollToIndex({ index: activeIndex, animated: true });
+    };
+  }, [onPressCell, resetPageOnPressCell, activeIndex]);
+
   const snapToIndices = useMemo(() => pageDates.map((_, index) => index), [pageDates]);
   const keyExtractorList = useCallback((item: Date) => item.toISOString(), []);
   const getFixedItemSize = useCallback(() => width, [width]);
@@ -597,6 +805,7 @@ function TimeGridInner<T>({
       <View style={{ width, height: pageHeight }}>
         <TimetablePage
           mode={mode}
+          numberOfDays={numberOfDays}
           date={item}
           events={events}
           cellHeight={cellHeight}
@@ -606,17 +815,26 @@ function TimeGridInner<T>({
           isActive={index === activeIndex}
           scrollOffsetMinutes={scrollOffsetMinutes}
           weekStartsOn={weekStartsOn}
+          weekEndsOn={weekEndsOn}
           hourColumnWidth={hourColumnWidth}
           minHour={clampedMinHour}
           maxHour={clampedMaxHour}
           ampm={ampm}
+          timeslots={timeslots}
+          isRTL={isRTL}
+          showVerticalScrollIndicator={showVerticalScrollIndicator}
+          verticalScrollEnabled={verticalScrollEnabled}
+          hourComponent={hourComponent}
+          calendarCellStyle={calendarCellStyle}
           minHourHeight={minHourHeight}
           maxHourHeight={maxHourHeight}
           showNowIndicator={showNowIndicator}
           renderEvent={renderEvent}
           keyExtractor={keyExtractor}
           onPressEvent={onPressEvent}
-          onPressCell={onPressCell}
+          onLongPressEvent={onLongPressEvent}
+          onPressCell={handlePressCell}
+          onLongPressCell={onLongPressCell}
         />
       </View>
     ),
@@ -624,6 +842,7 @@ function TimeGridInner<T>({
       width,
       pageHeight,
       mode,
+      numberOfDays,
       events,
       cellHeight,
       hourHeight,
@@ -632,17 +851,26 @@ function TimeGridInner<T>({
       activeIndex,
       scrollOffsetMinutes,
       weekStartsOn,
+      weekEndsOn,
       hourColumnWidth,
       clampedMinHour,
       clampedMaxHour,
       ampm,
+      timeslots,
+      isRTL,
+      showVerticalScrollIndicator,
+      verticalScrollEnabled,
+      hourComponent,
+      calendarCellStyle,
       minHourHeight,
       maxHourHeight,
       showNowIndicator,
       renderEvent,
       keyExtractor,
       onPressEvent,
-      onPressCell,
+      onLongPressEvent,
+      handlePressCell,
+      onLongPressCell,
     ],
   );
 
@@ -656,18 +884,28 @@ function TimeGridInner<T>({
           mode={mode}
           width={width}
           hourColumnWidth={hourColumnWidth}
+          showWeekNumber={showWeekNumber}
+          weekNumberPrefix={weekNumberPrefix}
           locale={locale}
+          activeDate={activeDate}
+          onPressDateHeader={onPressDateHeader}
         />
       )}
 
+      {headerComponent}
+
       <View
         style={styles.pager}
-        onLayout={(event) => setPageHeight(event.nativeEvent.layout.height)}
+        onLayout={(event) => {
+          setPageHeight(event.nativeEvent.layout.height);
+          setMeasured(true);
+        }}
       >
         <LegendList
-          // Remount when the measured page height changes so the list adopts
-          // the corrected item height (avoids keeping the oversized window seed).
-          key={pageHeight}
+          // Remount only on the seed→measured transition (see `measured`), not on
+          // every height change, so a day↔week header-height difference resizes the
+          // items in place instead of remounting and blanking the page.
+          key={measured ? 'grid' : 'grid-seed'}
           ref={listRef}
           style={styles.pagerList}
           data={pageDates}
@@ -675,6 +913,7 @@ function TimeGridInner<T>({
           recycleItems={false}
           keyExtractor={keyExtractorList}
           getFixedItemSize={getFixedItemSize}
+          scrollEnabled={swipeEnabled}
           // Default: native paging — each page is the viewport width, so a swipe
           // hard-stops at the adjacent page and can't fling past it. With
           // `freeSwipe`, momentum carries across pages and snaps to a boundary.
@@ -698,17 +937,50 @@ type DefaultHeaderProps = {
   mode: CalendarMode;
   width: number;
   hourColumnWidth: number;
-  locale?: string;
+  showWeekNumber?: boolean;
+  weekNumberPrefix?: string;
+  locale?: Locale;
+  activeDate?: Date;
+  onPressDateHeader?: (date: Date) => void;
 };
 
-const DefaultHeader = ({ days, mode, width, hourColumnWidth, locale }: DefaultHeaderProps) => {
-  const dayWidth = mode === 'week' ? (width - hourColumnWidth) / days.length : width;
+const DefaultHeader = ({
+  days,
+  mode,
+  width,
+  hourColumnWidth,
+  showWeekNumber,
+  weekNumberPrefix = 'W',
+  locale,
+  activeDate,
+  onPressDateHeader,
+}: DefaultHeaderProps) => {
+  const theme = useCalendarTheme();
+  // Match the grid below: an hour-column spacer, then one column per day.
+  const dayWidth = (width - hourColumnWidth) / days.length;
 
   return (
     <View style={styles.headerRow}>
-      {mode === 'week' ? <View style={{ width: hourColumnWidth }} /> : null}
+      <View style={[styles.weekNumberGutter, { width: hourColumnWidth }]}>
+        {showWeekNumber && hourColumnWidth > 0 && days[0] ? (
+          <Text
+            style={[theme.text.hourLabel, { color: theme.colors.textMuted }]}
+            allowFontScaling={false}
+          >
+            {`${weekNumberPrefix}${getISOWeek(days[0])}`}
+          </Text>
+        ) : null}
+      </View>
       {days.map((day) => (
-        <DayHeader key={day.toISOString()} day={day} mode={mode} width={dayWidth} locale={locale} />
+        <DayHeader
+          key={day.toISOString()}
+          day={day}
+          mode={mode}
+          width={dayWidth}
+          locale={locale}
+          activeDate={activeDate}
+          onPressDateHeader={onPressDateHeader}
+        />
       ))}
     </View>
   );
@@ -718,31 +990,38 @@ type DayHeaderProps = {
   day: Date;
   mode: CalendarMode;
   width: number;
-  locale?: string;
+  locale?: Locale;
+  activeDate?: Date;
+  onPressDateHeader?: (date: Date) => void;
 };
 
-const DayHeader = ({ day, mode, width, locale }: DayHeaderProps) => {
+const DayHeader = ({ day, mode, width, locale, activeDate, onPressDateHeader }: DayHeaderProps) => {
   const theme = useCalendarTheme();
   const isToday = getIsToday(day);
+  // Highlight the chosen `activeDate` when supplied, else the real today.
+  const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
   const badgeSize = mode === 'day' ? 44 : 32;
 
   return (
-    <View style={[styles.dayHeader, { width, gap: mode === 'day' ? 4 : 2 }]}>
+    <Pressable
+      style={[styles.dayHeader, { width, gap: mode === 'day' ? 4 : 2 }]}
+      onPress={onPressDateHeader ? () => onPressDateHeader(day) : undefined}
+      disabled={!onPressDateHeader}
+      accessibilityRole={onPressDateHeader ? 'button' : undefined}
+    >
       <View
         style={[
           styles.dayHeaderBadge,
-          isToday && {
-            backgroundColor: theme.colors.todayBackground,
-            borderRadius: 999,
-            width: badgeSize,
-            height: badgeSize,
-          },
+          // Reserve the badge's size on every day so the highlight circle doesn't
+          // change the header's dimensions between today and other days (no shift).
+          { width: badgeSize, height: badgeSize, borderRadius: 999 },
+          isHighlighted && { backgroundColor: theme.colors.todayBackground },
         ]}
       >
         <Text
           style={[
             theme.text.dayNumber,
-            { color: isToday ? theme.colors.todayText : theme.colors.text },
+            { color: isHighlighted ? theme.colors.todayText : theme.colors.text },
           ]}
           allowFontScaling={false}
           {...(isToday && { accessibilityLabel: `Today, ${day.getDate()}` })}
@@ -751,9 +1030,9 @@ const DayHeader = ({ day, mode, width, locale }: DayHeaderProps) => {
         </Text>
       </View>
       <Text style={[theme.text.weekday, { color: theme.colors.text }]} allowFontScaling={false}>
-        {day.toLocaleDateString(locale, { weekday: 'short' })}
+        {format(day, 'EEE', { locale })}
       </Text>
-    </View>
+    </Pressable>
   );
 };
 
@@ -772,6 +1051,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 8,
   },
+  weekNumberGutter: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
   dayHeader: {
     alignItems: 'center',
   },
@@ -813,6 +1096,12 @@ const styles = StyleSheet.create({
     flex: 1,
     height: StyleSheet.hairlineWidth,
   },
+  timeslotLine: {
+    position: 'absolute',
+    right: 0,
+    height: StyleSheet.hairlineWidth,
+    opacity: 0.5,
+  },
   eventBox: {
     position: 'absolute',
     overflow: 'hidden',