@super-calendar/native 2.3.2 → 2.5.0

package/dist/picker.d.mts

@@ -1,3 +1,3 @@
-import { C as CalendarThemeProvider, D as mergeTheme, E as defaultTheme, O as useCalendarTheme, S as CalendarTheme, T as darkTheme, _ as RenderEvent, a as MonthPagerProps, b as WeekStartsOn, i as MonthPager, l as CalendarEvent, m as ICalendarEvent, n as MonthList, o as MonthView, p as EventKeyExtractor, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as RenderEventArgs, w as PartialCalendarTheme } from "./DefaultMonthEvent-BbCMc60z.mjs";
+import { A as darkTheme, C as RenderEventArgs, D as CalendarTheme, M as mergeTheme, N as useCalendarTheme, O as CalendarThemeProvider, S as RenderEvent, T as WeekStartsOn, a as MonthPager, c as MonthViewProps, h as CalendarMode, j as defaultTheme, k as PartialCalendarTheme, m as CalendarEvent, n as MonthList, o as MonthPagerProps, r as MonthListProps, s as MonthView, t as DefaultMonthEvent, v as EventKeyExtractor, y as ICalendarEvent } from "./DefaultMonthEvent-zDj9dHEv.mjs";
 import { DateRange, DateSelectionConstraints, DaySelectionState, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, UseDateRangeOptions, UseMonthGridOptions, buildMonthGrid, buildMonthWeeks, daySelectionState, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, minutesIntoDay, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
 export { type CalendarEvent, type CalendarMode, type CalendarTheme, CalendarThemeProvider, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultMonthEvent, type EventKeyExtractor, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type RenderEvent, type RenderEventArgs, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, mergeTheme, minutesIntoDay, nextDateRange, useCalendarTheme, useDateRange, useMonthGrid };

package/dist/picker.d.ts

@@ -1,3 +1,3 @@
-import { C as CalendarThemeProvider, D as mergeTheme, E as defaultTheme, O as useCalendarTheme, S as CalendarTheme, T as darkTheme, _ as RenderEvent, a as MonthPagerProps, b as WeekStartsOn, i as MonthPager, l as CalendarEvent, m as ICalendarEvent, n as MonthList, o as MonthView, p as EventKeyExtractor, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as RenderEventArgs, w as PartialCalendarTheme } from "./DefaultMonthEvent-BW6qy50X.js";
+import { A as darkTheme, C as RenderEventArgs, D as CalendarTheme, M as mergeTheme, N as useCalendarTheme, O as CalendarThemeProvider, S as RenderEvent, T as WeekStartsOn, a as MonthPager, c as MonthViewProps, h as CalendarMode, j as defaultTheme, k as PartialCalendarTheme, m as CalendarEvent, n as MonthList, o as MonthPagerProps, r as MonthListProps, s as MonthView, t as DefaultMonthEvent, v as EventKeyExtractor, y as ICalendarEvent } from "./DefaultMonthEvent-BSvuJUFk.js";
 import { DateRange, DateSelectionConstraints, DaySelectionState, MonthGrid, MonthGridDay, MonthGridWeek, MonthGridWeekday, UseDateRangeOptions, UseMonthGridOptions, buildMonthGrid, buildMonthWeeks, daySelectionState, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, minutesIntoDay, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
 export { type CalendarEvent, type CalendarMode, type CalendarTheme, CalendarThemeProvider, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultMonthEvent, type EventKeyExtractor, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type PartialCalendarTheme, type RenderEvent, type RenderEventArgs, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, mergeTheme, minutesIntoDay, nextDateRange, useCalendarTheme, useDateRange, useMonthGrid };

package/dist/picker.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MonthList = require("./MonthList-CFXm7BK_.js");
+const require_MonthList = require("./MonthList-Aczb2RSY.js");
 let _super_calendar_core = require("@super-calendar/core");
 exports.CalendarThemeProvider = require_MonthList.CalendarThemeProvider;
 exports.DefaultMonthEvent = require_MonthList.DefaultMonthEvent;

package/dist/picker.mjs

@@ -1,3 +1,3 @@
-import { c as darkTheme, d as useCalendarTheme, i as MonthView, l as defaultTheme, n as DefaultMonthEvent, r as MonthPager, s as CalendarThemeProvider, t as MonthList, u as mergeTheme } from "./MonthList-BidXJMfm.mjs";
+import { d as darkTheme, f as defaultTheme, i as MonthView, m as useCalendarTheme, n as DefaultMonthEvent, p as mergeTheme, r as MonthPager, t as MonthList, u as CalendarThemeProvider } from "./MonthList-zPLklHAY.mjs";
 import { buildMonthGrid, buildMonthWeeks, daySelectionState, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, minutesIntoDay, nextDateRange, useDateRange, useMonthGrid } from "@super-calendar/core";
 export { CalendarThemeProvider, DefaultMonthEvent, MonthList, MonthPager, MonthView, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, getIsToday, getWeekDays, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, mergeTheme, minutesIntoDay, nextDateRange, useCalendarTheme, useDateRange, useMonthGrid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super-calendar/native",
-  "version": "2.3.2",
+  "version": "2.5.0",
   "description": "Gesture-driven, virtualized month / week / day calendar and date picker for React Native (and web via react-native-web).",
   "keywords": [
     "agenda",
@@ -64,7 +64,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@super-calendar/core": "2.3.2"
+    "@super-calendar/core": "2.5.0"
   },
   "peerDependencies": {
     "@legendapp/list": ">=3",

package/src/components/Agenda.tsx

@@ -4,11 +4,18 @@ import { type ComponentType, type ReactElement, useCallback, useMemo } from "rea
 import { StyleSheet, Text, View } from "react-native";
 import { useCalendarTheme } from "../theme";
 import type { CalendarEvent, EventKeyExtractor, RenderEvent } from "../types";
+import { createSlots, type SlotStyleProps } from "../utils/slots";
 import { getIsToday } from "@super-calendar/core";
 import { isAllDayEvent } from "@super-calendar/core";
 
+/**
+ * The styleable parts of {@link Agenda}. Mirrors the dom renderer's slot names;
+ * the event itself is styled by `renderEvent` (or the theme), not a slot.
+ */
+export type AgendaSlot = "dayHeader" | "eventRow" | "empty";
+
 /** Props for {@link Agenda}, the day-grouped list view of events. */
-export type AgendaProps<T> = {
+export type AgendaProps<T> = SlotStyleProps<AgendaSlot> & {
   events: CalendarEvent<T>[];
   locale?: Locale;
   renderEvent: RenderEvent<T>;
@@ -41,8 +48,15 @@ export function Agenda<T>({
   onPressDay,
   activeDate,
   itemSeparatorComponent,
+  classNames,
+  styles: styleOverrides,
 }: AgendaProps<T>): ReactElement {
   const theme = useCalendarTheme();
+  // Stable across renders (it feeds the memoized renderItem below).
+  const slot = useMemo(
+    () => createSlots<AgendaSlot>({ classNames, styles: styleOverrides }),
+    [classNames, styleOverrides],
+  );
   const RenderEventComponent = renderEvent;
 
   const rows = useMemo<Row<T>[]>(() => {
@@ -66,10 +80,13 @@ export function Agenda<T>({
         const isHighlighted = activeDate ? isSameDay(item.date, activeDate) : getIsToday(item.date);
         return (
           <Text
-            style={[
-              styles.header,
-              { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted },
-            ]}
+            {...slot("dayHeader", {
+              base: styles.header,
+              themed: [
+                styles.headerText,
+                { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted },
+              ],
+            })}
             onPress={onPressDay ? () => onPressDay(item.date) : undefined}
             accessibilityRole={onPressDay ? "button" : "header"}
           >
@@ -78,7 +95,7 @@ export function Agenda<T>({
         );
       }
       return (
-        <View style={[styles.eventRow, theme.containers.agendaRow]}>
+        <View {...slot("eventRow", { base: styles.eventRow, themed: theme.containers.agendaRow })}>
           <RenderEventComponent
             event={item.event}
             mode="schedule"
@@ -89,11 +106,29 @@ export function Agenda<T>({
         </View>
       );
     },
-    [theme, locale, activeDate, onPressDay, onPressEvent, onLongPressEvent, RenderEventComponent],
+    [
+      theme,
+      locale,
+      activeDate,
+      onPressDay,
+      onPressEvent,
+      onLongPressEvent,
+      RenderEventComponent,
+      slot,
+    ],
   );
 
   if (rows.length === 0) {
-    return <Text style={[styles.empty, { color: theme.colors.textMuted }]}>No events</Text>;
+    return (
+      <Text
+        {...slot("empty", {
+          base: styles.empty,
+          themed: [styles.emptyText, { color: theme.colors.textMuted }],
+        })}
+      >
+        No events
+      </Text>
+    );
   }
 
   return (
@@ -115,20 +150,26 @@ const styles = StyleSheet.create({
   list: {
     flex: 1,
   },
+  // Structural layout / themed typography split per slot, so a slot class can
+  // replace the look without breaking the layout.
   header: {
-    fontSize: 13,
-    fontWeight: "600",
     paddingTop: 12,
     paddingBottom: 4,
     paddingHorizontal: 12,
   },
+  headerText: {
+    fontSize: 13,
+    fontWeight: "600",
+  },
   eventRow: {
     paddingHorizontal: 12,
     paddingVertical: 2,
   },
   empty: {
-    fontSize: 14,
     paddingVertical: 16,
     paddingHorizontal: 12,
   },
+  emptyText: {
+    fontSize: 14,
+  },
 });

package/src/components/AllDayLane.tsx

@@ -2,8 +2,13 @@ import { addDays, startOfDay } from "date-fns";
 import { StyleSheet, Text, View } from "react-native";
 import { useCalendarTheme } from "../theme";
 import type { CalendarEvent, CalendarMode, EventKeyExtractor, RenderEvent } from "../types";
+import { useSlots } from "../utils/slots";
 import { isAllDayEvent } from "@super-calendar/core";
 
+// The lane's slots are a subset of the TimeGrid slot union; typed locally so
+// this file doesn't import the full TimeGrid type.
+type AllDayLaneSlot = "allDayLane" | "allDayLabel" | "allDayColumn" | "allDayEvent";
+
 type AllDayLaneProps<T> = {
   days: Date[];
   events: CalendarEvent<T>[];
@@ -34,6 +39,7 @@ export function AllDayLane<T>({
   onLongPressEvent,
 }: AllDayLaneProps<T>) {
   const theme = useCalendarTheme();
+  const slot = useSlots<AllDayLaneSlot>();
   const RenderEventComponent = renderEvent;
 
   const allDay = events.filter(isAllDayEvent);
@@ -47,27 +53,35 @@ export function AllDayLane<T>({
 
   return (
     <View
-      style={[
-        styles.lane,
-        { borderBottomColor: theme.colors.gridLine },
-        theme.containers.allDayLane,
-      ]}
+      {...slot("allDayLane", {
+        base: styles.lane,
+        themed: [{ borderBottomColor: theme.colors.gridLine }, theme.containers.allDayLane],
+      })}
     >
       <View style={[styles.gutter, { width: hourColumnWidth }]}>
         {/* The "all-day" gutter label, mirroring the dom renderer: small, muted,
             and right-aligned against the timed columns. Centered vertically so it
             lines up with the chips whether the lane holds one event or several. */}
-        <Text style={[styles.label, { color: theme.colors.textMuted }]} allowFontScaling={false}>
+        <Text
+          {...slot("allDayLabel", {
+            base: styles.label,
+            themed: { color: theme.colors.textMuted },
+          })}
+          allowFontScaling={false}
+        >
           all-day
         </Text>
       </View>
       {days.map((day, dayIndex) => (
         <View
           key={day.toISOString()}
-          style={[styles.column, { width: dayWidth }, theme.containers.allDayColumn]}
+          {...slot("allDayColumn", {
+            base: [styles.column, { width: dayWidth }],
+            themed: theme.containers.allDayColumn,
+          })}
         >
           {perDay[dayIndex].map((event, index) => (
-            <View key={keyExtractor(event, index)} style={styles.chip}>
+            <View key={keyExtractor(event, index)} {...slot("allDayEvent", { base: styles.chip })}>
               <RenderEventComponent
                 event={event}
                 mode={mode}

package/src/components/Calendar.tsx

@@ -1,4 +1,7 @@
 import {
+  addDays,
+  addMonths,
+  addWeeks,
   endOfDay,
   endOfMonth,
   endOfWeek,
@@ -22,22 +25,34 @@ import type {
 } from "../types";
 import {
   type EventAccessibilityLabeler,
+  eventsInTimeZone,
+  expandRecurringEvents,
   type WeekdayFormat,
   getViewDays,
 } from "@super-calendar/core";
-import { Agenda } from "./Agenda";
+import { type SlotStyleProps } from "../utils/slots";
+import { Agenda, type AgendaSlot } from "./Agenda";
 import { DefaultEvent } from "./DefaultEvent";
 import { MonthPager } from "./MonthPager";
+import type { MonthViewSlot } from "./MonthView";
 import {
   DEFAULT_HOUR_HEIGHT,
   type EventDragHandler,
   type EventDragStartHandler,
   type HourRenderer,
   TimeGrid,
+  type TimeGridSlot,
 } from "./TimeGrid";
 
+/**
+ * Every styleable slot across the Calendar's views. The month slots reach the
+ * month pager, the grid slots reach the time grid, and the agenda slots reach
+ * the schedule view; slots for views that aren't rendered are ignored.
+ */
+export type CalendarSlot = MonthViewSlot | TimeGridSlot | AgendaSlot;
+
 /** Props for the {@link Calendar} component. */
-export type CalendarProps<T> = {
+export type CalendarProps<T> = SlotStyleProps<CalendarSlot> & {
   events: CalendarEvent<T>[];
   mode: CalendarMode;
   date: Date;
@@ -191,6 +206,12 @@ export type CalendarProps<T> = {
   showNowIndicator?: boolean;
   /** A date-fns `Locale` for weekday/date labels. Defaults to English. */
   locale?: Locale;
+  /**
+   * Display events in this IANA time zone (e.g. `"America/New_York"`), DST-correct
+   * and independent of the device zone. Display-only: it shifts the wall-clock the
+   * grid lays out from, it doesn't change your `Date`s. Uses `eventsInTimeZone`.
+   */
+  timeZone?: string;
   /** Highlight this date (header/cell/agenda) instead of the real "today". */
   activeDate?: Date;
   /**
@@ -244,6 +265,34 @@ function visibleRange(
   return [startOfDay(days[0]), endOfDay(days[days.length - 1])];
 }
 
+// The range to materialise recurring occurrences over. Wider than `visibleRange`
+// by one page on each side, because the pager pre-renders the neighbour pages;
+// without the pad, recurring events would blink out for a page mid-swipe.
+function expansionRange(
+  mode: CalendarMode,
+  date: Date,
+  weekStartsOn: WeekStartsOn,
+  numberOfDays: number,
+  weekEndsOn?: WeekStartsOn,
+): [Date, Date] {
+  if (mode === "month") {
+    return [
+      startOfWeek(startOfMonth(addMonths(date, -1)), { weekStartsOn }),
+      // The extra week covers a `showSixWeeks` neighbour page whose own month
+      // fits in five weeks but is padded to six (the 6th row trails the month).
+      addWeeks(endOfWeek(endOfMonth(addMonths(date, 1)), { weekStartsOn }), 1),
+    ];
+  }
+  if (mode === "schedule") {
+    // The agenda lists forward from the anchor date; three months is a sensible
+    // default look-ahead. Pre-expand for a different window.
+    return [startOfDay(date), endOfDay(addMonths(date, 3))];
+  }
+  const days = getViewDays(mode, date, weekStartsOn, numberOfDays, false, weekEndsOn);
+  const span = days.length;
+  return [startOfDay(addDays(days[0], -span)), endOfDay(addDays(days[days.length - 1], span))];
+}
+
 /**
  * The top-level calendar. Switches between month, week, day, 3days, custom, and
  * schedule modes, and is gesture-driven and virtualized. It is a controlled
@@ -331,6 +380,7 @@ export function Calendar<T>({
   scrollOffsetMinutes,
   showNowIndicator,
   locale,
+  timeZone,
   activeDate,
   isRTL,
   freeSwipe,
@@ -338,11 +388,34 @@ export function Calendar<T>({
   renderHeaderForMonthView,
   renderCustomDateForMonth,
   itemSeparatorComponent,
+  classNames,
+  styles: styleOverrides,
 }: CalendarProps<T>): ReactElement {
   const mergedTheme = useMemo(() => mergeTheme(theme), [theme]);
   const internalCellHeight = useSharedValue(hourHeight);
   const cellHeight = cellHeightProp ?? internalCellHeight;
 
+  // Materialise recurring events over the range this mode renders (plus a one-page
+  // buffer so occurrences survive the pager's pre-rendered neighbours), then apply
+  // the display zone. Non-recurring and already-expanded events pass through, so
+  // identity is preserved for the common (no-recurrence) case.
+  const displayEvents = useMemo(() => {
+    let out = events;
+    if (out.some((e) => e.recurrence)) {
+      let [start, end] = expansionRange(mode, date, weekStartsOn, numberOfDays ?? 1, weekEndsOn);
+      // A display zone shifts each occurrence's wall-clock by up to ~a day, which
+      // can move an edge occurrence into a visible column; widen so it's generated.
+      if (timeZone) {
+        start = addDays(start, -1);
+        end = addDays(end, 1);
+      }
+      out = expandRecurringEvents(out, start, end);
+    }
+    if (timeZone) out = eventsInTimeZone(out, timeZone);
+    return out;
+    // `date.getTime()`: recompute on the instant, not a re-created Date identity.
+  }, [events, mode, date.getTime(), weekStartsOn, numberOfDays, weekEndsOn, timeZone]);
+
   // Swallow presses on disabled events once, so every view inherits the guard.
   const handlePressEvent = useCallback(
     (event: CalendarEvent<T>) => {
@@ -422,7 +495,7 @@ export function Calendar<T>({
       {mode === "month" ? (
         <MonthPager
           date={date}
-          events={events}
+          events={displayEvents}
           maxVisibleEventCount={maxVisibleEventCount}
           weekStartsOn={weekStartsOn}
           weekdayFormat={weekdayFormat}
@@ -447,10 +520,12 @@ export function Calendar<T>({
           onChangeDate={handleChangeDate}
           freeSwipe={freeSwipe}
           swipeEnabled={swipeEnabled}
+          classNames={classNames}
+          styles={styleOverrides}
         />
       ) : mode === "schedule" ? (
         <Agenda
-          events={events}
+          events={displayEvents}
           locale={locale}
           renderEvent={resolvedRenderEvent}
           keyExtractor={keyExtractor}
@@ -459,6 +534,8 @@ export function Calendar<T>({
           onPressDay={onPressDay}
           activeDate={activeDate}
           itemSeparatorComponent={itemSeparatorComponent}
+          classNames={classNames}
+          styles={styleOverrides}
         />
       ) : (
         <TimeGrid
@@ -466,7 +543,7 @@ export function Calendar<T>({
           numberOfDays={numberOfDays}
           weekEndsOn={weekEndsOn}
           date={date}
-          events={events}
+          events={displayEvents}
           cellHeight={cellHeight}
           hourHeight={hourHeight}
           weekStartsOn={weekStartsOn}
@@ -510,6 +587,8 @@ export function Calendar<T>({
           onPressDateHeader={onPressDateHeader}
           onChangeDate={handleChangeDate}
           renderHeader={renderTimeGridHeader}
+          classNames={classNames}
+          styles={styleOverrides}
         />
       )}
     </CalendarThemeProvider>

package/src/components/DefaultEvent.tsx

@@ -39,6 +39,8 @@ export function DefaultEvent<T>({
   ellipsizeTitle = false,
   allDayLabel,
   accessibilityLabel: accessibilityLabelProp,
+  accessibilityActions,
+  onAccessibilityAction,
   cellStyle,
   onPress,
   onLongPress,
@@ -134,6 +136,8 @@ export function DefaultEvent<T>({
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       accessibilityState={{ disabled: event.disabled ?? false }}
+      accessibilityActions={accessibilityActions}
+      onAccessibilityAction={onAccessibilityAction}
     >
       <Animated.View testID="event-chip-content" style={[styles.content, contentStyle]}>
         {event.title ? (

package/src/components/MonthList.tsx

@@ -36,8 +36,12 @@ import {
   isDateSelectable,
 } from "@super-calendar/core";
 import { buildMonthWeeks, getWeekDays, weekdayFormatToken } from "@super-calendar/core";
+import { createSlots, type SlotStyleProps } from "../utils/slots";
 import { DefaultMonthEvent } from "./DefaultMonthEvent";
-import { MonthView } from "./MonthView";
+import { MonthView, type MonthViewSlot } from "./MonthView";
+
+/** The styleable parts of {@link MonthList}: the same slots as {@link MonthView}. */
+export type MonthListSlot = MonthViewSlot;
 
 const isWeb = Platform.OS === "web";
 
@@ -133,7 +137,7 @@ export type MonthListProps<T> = {
   onChangeVisibleMonth?: (month: Date) => void;
   /** Replace the per-month title (default "LLLL yyyy"). */
   renderMonthHeader?: (month: Date) => React.ReactNode;
-};
+} & SlotStyleProps<MonthListSlot>;
 
 function MonthListInner<T>({
   date,
@@ -168,8 +172,15 @@ function MonthListInner<T>({
   onSelectDrag,
   onChangeVisibleMonth,
   renderMonthHeader,
+  classNames,
+  styles: styleOverrides,
 }: MonthListProps<T>): ReactElement {
   const theme = useCalendarTheme();
+  // Stable across renders (it feeds the memoized renderItem below).
+  const slot = useMemo(
+    () => createSlots<MonthListSlot>({ classNames, styles: styleOverrides }),
+    [classNames, styleOverrides],
+  );
   const listRef = useRef<LegendListRef>(null);
 
   // Compact rows for the picker; taller rows once events are shown, so a day cell
@@ -183,6 +194,17 @@ function MonthListInner<T>({
   // land on an off-screen month and scroll the list backwards.
   const [firstViewableIndex, setFirstViewableIndex] = useState(0);
 
+  // Months are keyed by dates that never change, so LegendList keeps mounted
+  // rows and only re-renders them when `data` or `extraData` changes. Feed
+  // `events` and `activeDate` (renderItem captures them; without this, events
+  // that arrive after mount never paint, same bug as the MonthPager had) plus
+  // `firstViewableIndex` (the web `inert` cutoff must stay current). Selection
+  // needs no entry: it reaches MonthView through context.
+  const listExtraData = useMemo(
+    () => ({ events, activeDate, firstViewableIndex }),
+    [events, activeDate, firstViewableIndex],
+  );
+
   // A fixed window of months anchored once, aligned to the month start.
   const [anchorDate] = useState(date);
   const anchor = useMemo(() => startOfMonth(anchorDate), [anchorDate]);
@@ -414,7 +436,12 @@ function MonthListInner<T>({
           {renderMonthHeader ? (
             renderMonthHeader(item)
           ) : (
-            <Text style={[styles.monthTitle, { color: theme.colors.text }]}>
+            <Text
+              {...slot("title", {
+                base: styles.monthTitle,
+                themed: [styles.monthTitleText, { color: theme.colors.text }],
+              })}
+            >
               {format(item, "LLLL yyyy", { locale })}
             </Text>
           )}
@@ -451,6 +478,8 @@ function MonthListInner<T>({
             onPressMore={onPressMore}
             onDayPointerDown={isWeb && dragEnabled ? onDayPointerDown : undefined}
             onDayPointerEnter={isWeb && dragEnabled ? onDayPointerEnter : undefined}
+            classNames={classNames}
+            styles={styleOverrides}
           />
         </View>
       </MonthBlock>
@@ -484,6 +513,9 @@ function MonthListInner<T>({
       onPressMore,
       onDayPointerDown,
       onDayPointerEnter,
+      slot,
+      classNames,
+      styleOverrides,
     ],
   );
 
@@ -493,9 +525,7 @@ function MonthListInner<T>({
       style={styles.list}
       data={monthDates}
       recycleItems={false}
-      // Re-render mounted months when the viewport cutoff changes, so the inert
-      // flag on above-viewport months (web focus containment) stays current.
-      extraData={firstViewableIndex}
+      extraData={listExtraData}
       keyExtractor={keyExtractorList}
       getFixedItemSize={getFixedItemSize}
       initialScrollIndex={initialIndex}
@@ -517,11 +547,19 @@ function MonthListInner<T>({
   return (
     <CalendarSelectionProvider value={selection}>
       <View style={styles.container}>
-        <View style={[styles.weekdayHeader, { borderBottomColor: theme.colors.gridLine }]}>
+        <View
+          {...slot("weekdays", {
+            base: styles.weekdayHeader,
+            themed: { borderBottomColor: theme.colors.gridLine },
+          })}
+        >
           {weekDays.map((day) => (
             <Text
               key={day.toISOString()}
-              style={[styles.weekdayLabel, { color: theme.colors.textMuted }]}
+              {...slot("weekday", {
+                base: styles.weekdayLabel,
+                themed: [styles.weekdayLabelText, { color: theme.colors.textMuted }],
+              })}
               allowFontScaling={false}
             >
               {format(day, weekdayFormatToken(weekdayFormat), { locale })}
@@ -591,12 +629,16 @@ const styles = StyleSheet.create({
   container: { flex: 1 },
   list: { flex: 1 },
   monthHeader: { justifyContent: "center" },
-  monthTitle: { paddingHorizontal: 8, fontSize: 17, fontWeight: "700" },
+  // Structural layout / themed typography split per slot, so a slot class can
+  // replace the look without breaking the layout.
+  monthTitle: { paddingHorizontal: 8 },
+  monthTitleText: { fontSize: 17, fontWeight: "700" },
   grid: { flex: 1 },
   weekdayHeader: {
     flexDirection: "row",
     paddingVertical: 8,
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  weekdayLabel: { flex: 1, textAlign: "center", fontSize: 12, fontWeight: "600" },
+  weekdayLabel: { flex: 1, textAlign: "center" },
+  weekdayLabelText: { fontSize: 12, fontWeight: "600" },
 });