@super-calendar/native 2.1.5 → 2.3.0

package/dist/picker.d.mts

@@ -1,3 +1,3 @@
-import { C as defaultTheme, S as darkTheme, T as useCalendarTheme, a as MonthPagerProps, b as CalendarThemeProvider, d as EventKeyExtractor, f as ICalendarEvent, g as RenderEventArgs, h as RenderEvent, i as MonthPager, l as CalendarEvent, n as MonthList, o as MonthView, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as WeekStartsOn, w as mergeTheme, x as PartialCalendarTheme, y as CalendarTheme } from "./DefaultMonthEvent-C-BiOsXb.mjs";
+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 { 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 defaultTheme, S as darkTheme, T as useCalendarTheme, a as MonthPagerProps, b as CalendarThemeProvider, d as EventKeyExtractor, f as ICalendarEvent, g as RenderEventArgs, h as RenderEvent, i as MonthPager, l as CalendarEvent, n as MonthList, o as MonthView, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as WeekStartsOn, w as mergeTheme, x as PartialCalendarTheme, y as CalendarTheme } from "./DefaultMonthEvent-CcZLyfps.js";
+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 { 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-ege6HsEP.js");
+const require_MonthList = require("./MonthList-CFXm7BK_.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 defaultTheme, i as MonthView, l as mergeTheme, n as DefaultMonthEvent, o as CalendarThemeProvider, r as MonthPager, s as darkTheme, t as MonthList, u as useCalendarTheme } from "./MonthList-BKlLes2B.mjs";
+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 { 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.1.5",
+  "version": "2.3.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.1.5"
+    "@super-calendar/core": "2.3.0"
   },
   "peerDependencies": {
     "@legendapp/list": ">=3",

package/src/components/Agenda.tsx

@@ -78,7 +78,7 @@ export function Agenda<T>({
         );
       }
       return (
-        <View style={styles.eventRow}>
+        <View style={[styles.eventRow, theme.containers.agendaRow]}>
           <RenderEventComponent
             event={item.event}
             mode="schedule"
@@ -98,7 +98,7 @@ export function Agenda<T>({
 
   return (
     <LegendList
-      style={styles.list}
+      style={[styles.list, theme.containers.agendaList]}
       data={rows}
       keyExtractor={keyExtractorRow}
       renderItem={renderItem}

package/src/components/AllDayLane.tsx

@@ -46,7 +46,13 @@ export function AllDayLane<T>({
   if (perDay.every((list) => list.length === 0)) return null;
 
   return (
-    <View style={[styles.lane, { borderBottomColor: theme.colors.gridLine }]}>
+    <View
+      style={[
+        styles.lane,
+        { 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
@@ -56,7 +62,10 @@ export function AllDayLane<T>({
         </Text>
       </View>
       {days.map((day, dayIndex) => (
-        <View key={day.toISOString()} style={[styles.column, { width: dayWidth }]}>
+        <View
+          key={day.toISOString()}
+          style={[styles.column, { width: dayWidth }, theme.containers.allDayColumn]}
+        >
           {perDay[dayIndex].map((event, index) => (
             <View key={keyExtractor(event, index)} style={styles.chip}>
               <RenderEventComponent

package/src/components/Calendar.tsx

@@ -20,7 +20,11 @@ import type {
   RenderEventArgs,
   WeekStartsOn,
 } from "../types";
-import { getViewDays } from "@super-calendar/core";
+import {
+  type EventAccessibilityLabeler,
+  type WeekdayFormat,
+  getViewDays,
+} from "@super-calendar/core";
 import { Agenda } from "./Agenda";
 import { DefaultEvent } from "./DefaultEvent";
 import { MonthPager } from "./MonthPager";
@@ -104,6 +108,8 @@ export type CalendarProps<T> = {
   disableMonthEventCellPress?: boolean;
   /** First day of the week. Sunday = 0 (default) … Saturday = 6. */
   weekStartsOn?: WeekStartsOn;
+  /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat;
   /** Number of day columns when `mode="custom"`. Ignored by other modes. Default 1. */
   numberOfDays?: number;
   /**
@@ -114,6 +120,12 @@ export type CalendarProps<T> = {
   weekEndsOn?: WeekStartsOn;
   /** Replace the built-in event box. Return a `flex: 1` element. */
   renderEvent?: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Applies
+   * across every view. Defaults to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
   /** Per-event style merged onto the built-in event box (static or a function of the event). */
   eventCellStyle?: StyleProp<ViewStyle> | ((event: CalendarEvent<T>) => StyleProp<ViewStyle>);
   /** Per-date style for month cells and week/day columns (e.g. shade specific dates). */
@@ -284,9 +296,11 @@ export function Calendar<T>({
   showAdjacentMonths,
   disableMonthEventCellPress,
   weekStartsOn = 0,
+  weekdayFormat,
   numberOfDays,
   weekEndsOn,
   renderEvent = DefaultEvent,
+  eventAccessibilityLabel,
   eventCellStyle,
   calendarCellStyle,
   businessHours,
@@ -365,7 +379,8 @@ export function Calendar<T>({
       ampm == null &&
       showTime == null &&
       ellipsizeTitle == null &&
-      allDayLabel == null
+      allDayLabel == null &&
+      eventAccessibilityLabel == null
     )
       return renderEvent;
     const Base = renderEvent;
@@ -380,10 +395,27 @@ export function Calendar<T>({
           showTime={showTime}
           ellipsizeTitle={ellipsizeTitle}
           allDayLabel={allDayLabel}
+          accessibilityLabel={
+            eventAccessibilityLabel
+              ? eventAccessibilityLabel(props.event, {
+                  mode: props.mode,
+                  isAllDay: props.isAllDay ?? false,
+                  ampm: ampm ?? false,
+                })
+              : props.accessibilityLabel
+          }
         />
       );
     };
-  }, [renderEvent, eventCellStyle, ampm, showTime, ellipsizeTitle, allDayLabel]);
+  }, [
+    renderEvent,
+    eventCellStyle,
+    ampm,
+    showTime,
+    ellipsizeTitle,
+    allDayLabel,
+    eventAccessibilityLabel,
+  ]);
 
   return (
     <CalendarThemeProvider value={mergedTheme}>
@@ -393,6 +425,7 @@ export function Calendar<T>({
           events={events}
           maxVisibleEventCount={maxVisibleEventCount}
           weekStartsOn={weekStartsOn}
+          weekdayFormat={weekdayFormat}
           locale={locale}
           sortedMonthView={sortedMonthView}
           moreLabel={moreLabel}
@@ -437,6 +470,7 @@ export function Calendar<T>({
           cellHeight={cellHeight}
           hourHeight={hourHeight}
           weekStartsOn={weekStartsOn}
+          weekdayFormat={weekdayFormat}
           renderEvent={resolvedRenderEvent}
           keyExtractor={keyExtractor}
           scrollOffsetMinutes={scrollOffsetMinutes}

package/src/components/DefaultEvent.tsx

@@ -38,6 +38,7 @@ export function DefaultEvent<T>({
   showTime = true,
   ellipsizeTitle = false,
   allDayLabel,
+  accessibilityLabel: accessibilityLabelProp,
   cellStyle,
   onPress,
   onLongPress,
@@ -60,15 +61,19 @@ export function DefaultEvent<T>({
   );
 
   // Announce the full event to screen readers: title plus the all-day label or
-  // the time range (which is otherwise only shown visually).
-  const accessibilityLabel = eventAccessibilityLabel({
-    title: event.title,
-    isAllDay: isAllDayEvent,
-    start: event.start,
-    end: event.end,
-    ampm,
-    allDayLabel,
-  });
+  // the time range (which is otherwise only shown visually). A consumer's
+  // `eventAccessibilityLabel` override, threaded in as `accessibilityLabelProp`,
+  // takes precedence.
+  const accessibilityLabel =
+    accessibilityLabelProp ??
+    eventAccessibilityLabel({
+      title: event.title,
+      isAllDay: isAllDayEvent,
+      start: event.start,
+      end: event.end,
+      ampm,
+      allDayLabel,
+    });
 
   // Month cells and the all-day lane get a single clipped line; the timed grid
   // (and the roomy schedule rows) wrap to fill the box. `titleNumberOfLines`
@@ -106,6 +111,14 @@ export function DefaultEvent<T>({
     return { display: layout.value.showTime ? "flex" : "none" };
   }, [layout]);
 
+  // A chip reduced to a single title line (no time) centers it vertically, so a
+  // very short event reads balanced instead of hugging the top edge. Layout is
+  // recomputed on the UI thread, so the alignment tracks pinch-zoom live.
+  const contentStyle = useAnimatedStyle(() => {
+    const { titleMaxLines, showTime } = layout.value;
+    return { justifyContent: titleMaxLines === 1 && !showTime ? "center" : "flex-start" };
+  }, [layout]);
+
   return (
     <TouchableOpacity
       style={[
@@ -122,56 +135,58 @@ export function DefaultEvent<T>({
       accessibilityLabel={accessibilityLabel}
       accessibilityState={{ disabled: event.disabled ?? false }}
     >
-      {event.title ? (
-        fixedTitleLines == null ? (
-          <Animated.View style={[styles.titleClip, titleClipStyle]}>
+      <Animated.View testID="event-chip-content" style={[styles.content, contentStyle]}>
+        {event.title ? (
+          fixedTitleLines == null ? (
+            <Animated.View style={[styles.titleClip, titleClipStyle]}>
+              <Text
+                style={[
+                  theme.text.eventTitle,
+                  isSchedule && styles.scheduleTitle,
+                  { color: theme.colors.eventText },
+                ]}
+                ellipsizeMode={ellipsizeMode}
+                allowFontScaling={false}
+              >
+                {event.title}
+              </Text>
+            </Animated.View>
+          ) : (
             <Text
               style={[
                 theme.text.eventTitle,
+                styles.title,
                 isSchedule && styles.scheduleTitle,
                 { color: theme.colors.eventText },
               ]}
+              // Month cells and the all-day lane are compact: a single clipped line.
+              numberOfLines={fixedTitleLines}
               ellipsizeMode={ellipsizeMode}
               allowFontScaling={false}
             >
               {event.title}
             </Text>
+          )
+        ) : null}
+        {timeLabel ? (
+          <Animated.View style={timeStyle}>
+            <Text
+              style={[
+                styles.time,
+                isSchedule && styles.scheduleTime,
+                { color: theme.colors.eventText },
+              ]}
+              // Wrap rather than clip horizontally: a narrow column shows the full
+              // range across two lines instead of a cut-off "11:00 - 1".
+              numberOfLines={2}
+              ellipsizeMode={ellipsizeMode}
+              allowFontScaling={false}
+            >
+              {timeLabel}
+            </Text>
           </Animated.View>
-        ) : (
-          <Text
-            style={[
-              theme.text.eventTitle,
-              styles.title,
-              isSchedule && styles.scheduleTitle,
-              { color: theme.colors.eventText },
-            ]}
-            // Month cells and the all-day lane are compact: a single clipped line.
-            numberOfLines={fixedTitleLines}
-            ellipsizeMode={ellipsizeMode}
-            allowFontScaling={false}
-          >
-            {event.title}
-          </Text>
-        )
-      ) : null}
-      {timeLabel ? (
-        <Animated.View style={timeStyle}>
-          <Text
-            style={[
-              styles.time,
-              isSchedule && styles.scheduleTime,
-              { color: theme.colors.eventText },
-            ]}
-            // Wrap rather than clip horizontally: a narrow column shows the full
-            // range across two lines instead of a cut-off "11:00 - 1".
-            numberOfLines={2}
-            ellipsizeMode={ellipsizeMode}
-            allowFontScaling={false}
-          >
-            {timeLabel}
-          </Text>
-        </Animated.View>
-      ) : null}
+        ) : null}
+      </Animated.View>
     </TouchableOpacity>
   );
 }
@@ -205,6 +220,12 @@ const styles = StyleSheet.create({
     lineHeight: 18,
     opacity: 0.75,
   },
+  // The title/time column; grows into the grid's sized box so a lone title line
+  // can center vertically, and shrinks with it (content-sized chips unaffected).
+  content: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
   // Clips the wrapped title to the animated whole-line max-height.
   titleClip: {
     overflow: "hidden",

package/src/components/DefaultMonthEvent.tsx

@@ -24,6 +24,7 @@ export function DefaultMonthEvent<T>({
   showTime = true,
   ellipsizeTitle = false,
   allDayLabel,
+  accessibilityLabel: accessibilityLabelProp,
   cellStyle,
   onPress,
   onLongPress,
@@ -40,14 +41,16 @@ export function DefaultMonthEvent<T>({
     allDayLabel,
   });
   const ellipsizeMode = titleEllipsizeMode(ellipsizeTitle);
-  const accessibilityLabel = eventAccessibilityLabel({
-    title: event.title,
-    isAllDay: isAllDayEvent,
-    start: event.start,
-    end: event.end,
-    ampm,
-    allDayLabel,
-  });
+  const accessibilityLabel =
+    accessibilityLabelProp ??
+    eventAccessibilityLabel({
+      title: event.title,
+      isAllDay: isAllDayEvent,
+      start: event.start,
+      end: event.end,
+      ampm,
+      allDayLabel,
+    });
 
   return (
     <TouchableOpacity

package/src/components/MonthList.tsx

@@ -31,9 +31,11 @@ import {
   type CalendarSelection,
   CalendarSelectionProvider,
   type DateRange,
+  type EventAccessibilityLabeler,
+  type WeekdayFormat,
   isDateSelectable,
 } from "@super-calendar/core";
-import { buildMonthWeeks, getWeekDays } from "@super-calendar/core";
+import { buildMonthWeeks, getWeekDays, weekdayFormatToken } from "@super-calendar/core";
 import { DefaultMonthEvent } from "./DefaultMonthEvent";
 import { MonthView } from "./MonthView";
 
@@ -76,6 +78,8 @@ export type MonthListProps<T> = {
   /** Events to render in the grids. Omit for an events-free date picker. */
   events?: CalendarEvent<T>[];
   weekStartsOn: WeekStartsOn;
+  /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat;
   /**
    * Height of each week row (px). The month block sizes to its row count. Defaults
    * to a taller row when `events` are shown (so a day fits ~3 chips) and a compact
@@ -106,6 +110,12 @@ export type MonthListProps<T> = {
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   /** Replace the built-in event box. Defaults to `DefaultEvent`. */
   renderEvent?: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event chip. Receives the event and a
+   * `{ mode: "month", isAllDay, ampm: false }` context; return the full text to
+   * announce. Defaults to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
   /** Stable key per event. Defaults to start-time + index. */
   keyExtractor?: EventKeyExtractor<T>;
   onPressDay?: (date: Date) => void;
@@ -129,6 +139,7 @@ function MonthListInner<T>({
   date,
   events = NO_EVENTS as CalendarEvent<T>[],
   weekStartsOn,
+  weekdayFormat = "short",
   weekRowHeight: weekRowHeightProp,
   monthHeaderHeight = DEFAULT_MONTH_HEADER_HEIGHT,
   maxVisibleEventCount,
@@ -147,6 +158,7 @@ function MonthListInner<T>({
   isDateDisabled,
   calendarCellStyle,
   renderEvent = DefaultMonthEvent,
+  eventAccessibilityLabel,
   keyExtractor = defaultKeyExtractor as EventKeyExtractor<T>,
   onPressDay,
   onLongPressDay,
@@ -430,6 +442,7 @@ function MonthListInner<T>({
             fillCellOnSelection={fillCellOnSelection}
             calendarCellStyle={calendarCellStyle}
             renderEvent={renderEvent}
+            eventAccessibilityLabel={eventAccessibilityLabel}
             keyExtractor={keyExtractor}
             onPressDay={dragEnabled ? handlePressDay : onPressDay}
             onLongPressDay={onLongPressDay}
@@ -511,7 +524,7 @@ function MonthListInner<T>({
               style={[styles.weekdayLabel, { color: theme.colors.textMuted }]}
               allowFontScaling={false}
             >
-              {format(day, "EEE", { locale })}
+              {format(day, weekdayFormatToken(weekdayFormat), { locale })}
             </Text>
           ))}
         </View>

package/src/components/MonthPager.tsx

@@ -17,7 +17,7 @@ import {
 } from "react-native";
 import { useCalendarTheme } from "../theme";
 import type { CalendarEvent, EventKeyExtractor, RenderEvent, WeekStartsOn } from "../types";
-import { getWeekDays } from "@super-calendar/core";
+import { type WeekdayFormat, getWeekDays, weekdayFormatToken } from "@super-calendar/core";
 import { useWebPagerKeys } from "../utils/useWebPagerKeys";
 import { MonthView } from "./MonthView";
 
@@ -40,6 +40,7 @@ export type MonthPagerProps<T> = {
   events: CalendarEvent<T>[];
   maxVisibleEventCount?: number;
   weekStartsOn: WeekStartsOn;
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale;
   sortedMonthView?: boolean;
   moreLabel?: string;
@@ -70,6 +71,7 @@ function MonthPagerInner<T>({
   events,
   maxVisibleEventCount,
   weekStartsOn,
+  weekdayFormat = "short",
   locale,
   sortedMonthView,
   moreLabel,
@@ -266,16 +268,19 @@ function MonthPagerInner<T>({
   );
 
   return (
-    <View ref={containerRef} style={styles.container}>
+    <View ref={containerRef} style={[styles.container, theme.containers.monthContainer]}>
       {/* The active month's title, above the (shared) weekday header — mirrors the
           dom MonthView's title. The grids below omit their own title/weekdays. */}
-      <Text style={[styles.monthTitle, { color: theme.colors.text }]} allowFontScaling={false}>
+      <Text
+        style={[styles.monthTitle, theme.text.monthTitle, { color: theme.colors.text }]}
+        allowFontScaling={false}
+      >
         {format(date, "MMMM yyyy", locale ? { locale } : undefined)}
       </Text>
       {renderHeaderForMonthView ? (
         renderHeaderForMonthView(weekDays)
       ) : (
-        <MonthWeekdayHeader weekDays={weekDays} locale={locale} />
+        <MonthWeekdayHeader weekDays={weekDays} weekdayFormat={weekdayFormat} locale={locale} />
       )}
       <View
         style={styles.pager}
@@ -341,22 +346,27 @@ export const MonthPager = memo(MonthPagerInner) as typeof MonthPagerInner;
 
 type MonthWeekdayHeaderProps = {
   weekDays: Date[];
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale;
 };
 
 // The default weekday-label row above the month grid (e.g. "Mon Tue Wed…"),
 // one flex column per day to line up with the grid cells below.
-const MonthWeekdayHeader = ({ weekDays, locale }: MonthWeekdayHeaderProps) => {
+const MonthWeekdayHeader = ({
+  weekDays,
+  weekdayFormat = "short",
+  locale,
+}: MonthWeekdayHeaderProps) => {
   const theme = useCalendarTheme();
   return (
-    <View style={styles.weekdayHeader}>
+    <View style={[styles.weekdayHeader, theme.containers.weekdayHeader]}>
       {weekDays.map((day) => (
         <Text
           key={day.toISOString()}
           style={[theme.text.weekday, styles.weekdayLabel, { color: theme.colors.textMuted }]}
           allowFontScaling={false}
         >
-          {format(day, "EEE", { locale })}
+          {format(day, weekdayFormatToken(weekdayFormat), { locale })}
         </Text>
       ))}
     </View>
@@ -377,10 +387,8 @@ const styles = StyleSheet.create({
   webNoScroll: {
     overflow: "hidden",
   },
-  // Matches the dom MonthView title: "MMMM yyyy" above the weekday row.
+  // Layout only; the font is themeable via `theme.text.monthTitle`.
   monthTitle: {
-    fontSize: 17,
-    fontWeight: "700",
     paddingTop: 10,
     paddingHorizontal: 14,
     paddingBottom: 6,