@super-calendar/native 2.1.5 → 2.2.0

package/dist/{DefaultMonthEvent-C-BiOsXb.d.mts → DefaultMonthEvent-BlfDkmF5.d.mts}

@@ -1,7 +1,7 @@
 import { Locale } from "date-fns";
 import { ComponentType, ReactElement } from "react";
 import { SharedValue } from "react-native-reanimated";
-import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
+import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventAccessibilityLabelContext, EventAccessibilityLabeler, EventAccessibilityLabeler as EventAccessibilityLabeler$1, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn, WeekdayFormat, WeekdayFormat as WeekdayFormat$1 } from "@super-calendar/core";
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 
 //#region src/theme.d.ts
@@ -16,12 +16,36 @@ interface CalendarTheme {
   /** Text styles for the calendar's labels and the built-in event box. */
   text: {
     /** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
-    weekday: TextStyle; /** Date number inside a month cell. */
+    weekday: TextStyle; /** The "MMMM yyyy" month title above the month grid. */
+    monthTitle: TextStyle; /** Date number inside a month cell. */
     dateCell: TextStyle; /** Hour labels down the left of the time grid. */
     hourLabel: TextStyle; /** The "+N more" overflow label in month cells. */
     more: TextStyle; /** Title inside the built-in default event box. */
     eventTitle: TextStyle;
   };
+  /**
+   * Per-part `ViewStyle` overrides for the renderer's container elements, the
+   * React Native counterpart of the web renderer's per-slot classes. Each is
+   * merged onto the built-in style, so you override only what you set. (Rolling
+   * out across the views; more slots as they land.)
+   */
+  containers: {
+    /** The month view's outer container (title + weekday header + grid). */monthContainer: ViewStyle; /** The weekday-label header row above a month grid. */
+    weekdayHeader: ViewStyle; /** Each week (row of 7 day cells) in the month grid. */
+    weekRow: ViewStyle; /** Each day cell in the month grid. */
+    dayCell: ViewStyle; /** The date badge (the circle) inside a month day cell. */
+    dayBadge: ViewStyle; /** An event chip inside a month day cell. */
+    monthEvent: ViewStyle; /** Each day's column header in the time grid. */
+    columnHeader: ViewStyle; /** A timed event's positioned box in the time grid (and resource timeline). */
+    timeGridEvent: ViewStyle; /** The current-time indicator line. */
+    nowIndicator: ViewStyle; /** Each resource row in the resource timeline. */
+    resourceRow: ViewStyle; /** The left-hand resource-label cell in the resource timeline. */
+    resourceLabel: ViewStyle; /** The schedule/agenda list's outer container. */
+    agendaList: ViewStyle; /** Each event row in the agenda list. */
+    agendaRow: ViewStyle; /** The all-day lane above the time grid. */
+    allDayLane: ViewStyle; /** Each day's column within the all-day lane. */
+    allDayColumn: ViewStyle;
+  };
   /** Corner radius of the today badge. Use a large value for a circle. */
   todayBadgeRadius: number;
   /**
@@ -48,6 +72,7 @@ declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
 type PartialCalendarTheme = {
   colors?: Partial<CalendarTheme["colors"]>;
   text?: Partial<CalendarTheme["text"]>;
+  containers?: Partial<CalendarTheme["containers"]>;
   todayBadgeRadius?: number;
   rangeBandHeight?: number;
 };
@@ -88,6 +113,12 @@ type RenderEventArgs<T = unknown> = {
   ellipsizeTitle?: boolean; /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
   allDayLabel?: string; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
   cellStyle?: StyleProp<ViewStyle>;
+  /**
+   * Screen-reader label to announce for the event, injected by a consumer's
+   * `eventAccessibilityLabel` override. The built-in renderers use it in place of
+   * their default label; `undefined` falls back to that default.
+   */
+  accessibilityLabel?: string;
   onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
   onLongPress?: () => void;
 };
@@ -111,7 +142,8 @@ type MonthViewProps<T> = {
    * explicit value when using a custom `renderEvent`.
    */
   maxVisibleEventCount?: number;
-  weekStartsOn: WeekStartsOn;
+  weekStartsOn: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
   sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
   moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
@@ -136,6 +168,12 @@ type MonthViewProps<T> = {
   onDayPointerEnter?: (date: Date) => void; /** Per-date style merged onto the day cell. */
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   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>;
   keyExtractor: EventKeyExtractor<T>;
   onPressDay?: (date: Date) => void;
   onLongPressDay?: (date: Date) => void;
@@ -153,6 +191,7 @@ declare function MonthViewInner<T>({
   events,
   maxVisibleEventCount,
   weekStartsOn,
+  weekdayFormat,
   locale,
   sortedMonthView,
   moreLabel,
@@ -171,6 +210,7 @@ declare function MonthViewInner<T>({
   isDateDisabled: isDateDisabledProp,
   calendarCellStyle,
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   onPressDay,
   onLongPressDay,
@@ -206,6 +246,7 @@ type MonthPagerProps<T> = {
   events: CalendarEvent$1<T>[];
   maxVisibleEventCount?: number;
   weekStartsOn: WeekStartsOn;
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale;
   sortedMonthView?: boolean;
   moreLabel?: string;
@@ -233,6 +274,7 @@ declare function MonthPagerInner<T>({
   events,
   maxVisibleEventCount,
   weekStartsOn,
+  weekdayFormat,
   locale,
   sortedMonthView,
   moreLabel,
@@ -280,7 +322,8 @@ declare const MonthPager: typeof MonthPagerInner;
 type MonthListProps<T> = {
   /** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
   events?: CalendarEvent$1<T>[];
-  weekStartsOn: WeekStartsOn;
+  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
@@ -307,7 +350,13 @@ type MonthListProps<T> = {
   maxDate?: Date;
   isDateDisabled?: (date: Date) => boolean;
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Replace the built-in event box. Defaults to `DefaultEvent`. */
-  renderEvent?: RenderEvent<T>; /** Stable key per event. Defaults to start-time + index. */
+  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;
   onLongPressDay?: (date: Date) => void;
@@ -327,6 +376,7 @@ declare function MonthListInner<T>({
   date,
   events,
   weekStartsOn,
+  weekdayFormat,
   weekRowHeight: weekRowHeightProp,
   monthHeaderHeight,
   maxVisibleEventCount,
@@ -345,6 +395,7 @@ declare function MonthListInner<T>({
   isDateDisabled,
   calendarCellStyle,
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   onPressDay,
   onLongPressDay,
@@ -391,9 +442,10 @@ declare function DefaultMonthEvent<T>({
   showTime,
   ellipsizeTitle,
   allDayLabel,
+  accessibilityLabel: accessibilityLabelProp,
   cellStyle,
   onPress,
   onLongPress
 }: RenderEventArgs<T>): ReactElement;
 //#endregion
-export { defaultTheme as C, darkTheme as S, useCalendarTheme as T, TimeGridMode as _, MonthPagerProps as a, CalendarThemeProvider as b, BusinessHours as c, EventKeyExtractor as d, ICalendarEvent as f, RenderEventArgs as g, RenderEvent as h, MonthPager as i, CalendarEvent$1 as l, RecurrenceRule as m, MonthList as n, MonthView as o, RecurrenceFrequency as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, WeekStartsOn as v, mergeTheme as w, PartialCalendarTheme as x, CalendarTheme as y };
+export { CalendarThemeProvider as C, mergeTheme as D, defaultTheme as E, useCalendarTheme as O, CalendarTheme as S, darkTheme as T, RenderEvent as _, MonthPagerProps as a, WeekStartsOn as b, BusinessHours as c, EventAccessibilityLabelContext as d, EventAccessibilityLabeler$1 as f, RecurrenceRule as g, RecurrenceFrequency as h, MonthPager as i, CalendarEvent$1 as l, ICalendarEvent as m, MonthList as n, MonthView as o, EventKeyExtractor as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, RenderEventArgs as v, PartialCalendarTheme as w, WeekdayFormat$1 as x, TimeGridMode as y };

package/dist/{DefaultMonthEvent-CcZLyfps.d.ts → DefaultMonthEvent-Cagj4aBo.d.ts}

@@ -2,7 +2,7 @@ import { Locale } from "date-fns";
 import { ComponentType, ReactElement } from "react";
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { SharedValue } from "react-native-reanimated";
-import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn } from "@super-calendar/core";
+import { BusinessHours, CalendarColors, CalendarEvent, CalendarEvent as CalendarEvent$1, CalendarMode, CalendarMode as CalendarMode$1, DateRange, EventAccessibilityLabelContext, EventAccessibilityLabeler, EventAccessibilityLabeler as EventAccessibilityLabeler$1, EventKeyExtractor, ICalendarEvent, RecurrenceFrequency, RecurrenceRule, TimeGridMode, WeekStartsOn, WeekdayFormat, WeekdayFormat as WeekdayFormat$1 } from "@super-calendar/core";
 
 //#region src/theme.d.ts
 /**
@@ -16,12 +16,36 @@ interface CalendarTheme {
   /** Text styles for the calendar's labels and the built-in event box. */
   text: {
     /** Large day number in the week/day header. */dayNumber: TextStyle; /** Short weekday label ("Mon") in headers. */
-    weekday: TextStyle; /** Date number inside a month cell. */
+    weekday: TextStyle; /** The "MMMM yyyy" month title above the month grid. */
+    monthTitle: TextStyle; /** Date number inside a month cell. */
     dateCell: TextStyle; /** Hour labels down the left of the time grid. */
     hourLabel: TextStyle; /** The "+N more" overflow label in month cells. */
     more: TextStyle; /** Title inside the built-in default event box. */
     eventTitle: TextStyle;
   };
+  /**
+   * Per-part `ViewStyle` overrides for the renderer's container elements, the
+   * React Native counterpart of the web renderer's per-slot classes. Each is
+   * merged onto the built-in style, so you override only what you set. (Rolling
+   * out across the views; more slots as they land.)
+   */
+  containers: {
+    /** The month view's outer container (title + weekday header + grid). */monthContainer: ViewStyle; /** The weekday-label header row above a month grid. */
+    weekdayHeader: ViewStyle; /** Each week (row of 7 day cells) in the month grid. */
+    weekRow: ViewStyle; /** Each day cell in the month grid. */
+    dayCell: ViewStyle; /** The date badge (the circle) inside a month day cell. */
+    dayBadge: ViewStyle; /** An event chip inside a month day cell. */
+    monthEvent: ViewStyle; /** Each day's column header in the time grid. */
+    columnHeader: ViewStyle; /** A timed event's positioned box in the time grid (and resource timeline). */
+    timeGridEvent: ViewStyle; /** The current-time indicator line. */
+    nowIndicator: ViewStyle; /** Each resource row in the resource timeline. */
+    resourceRow: ViewStyle; /** The left-hand resource-label cell in the resource timeline. */
+    resourceLabel: ViewStyle; /** The schedule/agenda list's outer container. */
+    agendaList: ViewStyle; /** Each event row in the agenda list. */
+    agendaRow: ViewStyle; /** The all-day lane above the time grid. */
+    allDayLane: ViewStyle; /** Each day's column within the all-day lane. */
+    allDayColumn: ViewStyle;
+  };
   /** Corner radius of the today badge. Use a large value for a circle. */
   todayBadgeRadius: number;
   /**
@@ -48,6 +72,7 @@ declare function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme;
 type PartialCalendarTheme = {
   colors?: Partial<CalendarTheme["colors"]>;
   text?: Partial<CalendarTheme["text"]>;
+  containers?: Partial<CalendarTheme["containers"]>;
   todayBadgeRadius?: number;
   rangeBandHeight?: number;
 };
@@ -88,6 +113,12 @@ type RenderEventArgs<T = unknown> = {
   ellipsizeTitle?: boolean; /** Label shown for an all-day event in the schedule (and its screen-reader text). Default "All day". */
   allDayLabel?: string; /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
   cellStyle?: StyleProp<ViewStyle>;
+  /**
+   * Screen-reader label to announce for the event, injected by a consumer's
+   * `eventAccessibilityLabel` override. The built-in renderers use it in place of
+   * their default label; `undefined` falls back to that default.
+   */
+  accessibilityLabel?: string;
   onPress: () => void; /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
   onLongPress?: () => void;
 };
@@ -111,7 +142,8 @@ type MonthViewProps<T> = {
    * explicit value when using a custom `renderEvent`.
    */
   maxVisibleEventCount?: number;
-  weekStartsOn: WeekStartsOn;
+  weekStartsOn: WeekStartsOn; /** Weekday header label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale; /** Sort each day's events by start time before slicing. Default true. */
   sortedMonthView?: boolean; /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
   moreLabel?: string; /** Show dimmed days from adjacent months in the grid. Default true. */
@@ -136,6 +168,12 @@ type MonthViewProps<T> = {
   onDayPointerEnter?: (date: Date) => void; /** Per-date style merged onto the day cell. */
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   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>;
   keyExtractor: EventKeyExtractor<T>;
   onPressDay?: (date: Date) => void;
   onLongPressDay?: (date: Date) => void;
@@ -153,6 +191,7 @@ declare function MonthViewInner<T>({
   events,
   maxVisibleEventCount,
   weekStartsOn,
+  weekdayFormat,
   locale,
   sortedMonthView,
   moreLabel,
@@ -171,6 +210,7 @@ declare function MonthViewInner<T>({
   isDateDisabled: isDateDisabledProp,
   calendarCellStyle,
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   onPressDay,
   onLongPressDay,
@@ -206,6 +246,7 @@ type MonthPagerProps<T> = {
   events: CalendarEvent$1<T>[];
   maxVisibleEventCount?: number;
   weekStartsOn: WeekStartsOn;
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale;
   sortedMonthView?: boolean;
   moreLabel?: string;
@@ -233,6 +274,7 @@ declare function MonthPagerInner<T>({
   events,
   maxVisibleEventCount,
   weekStartsOn,
+  weekdayFormat,
   locale,
   sortedMonthView,
   moreLabel,
@@ -280,7 +322,8 @@ declare const MonthPager: typeof MonthPagerInner;
 type MonthListProps<T> = {
   /** The month scrolled to on mount. */date: Date; /** Events to render in the grids. Omit for an events-free date picker. */
   events?: CalendarEvent$1<T>[];
-  weekStartsOn: WeekStartsOn;
+  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
@@ -307,7 +350,13 @@ type MonthListProps<T> = {
   maxDate?: Date;
   isDateDisabled?: (date: Date) => boolean;
   calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>; /** Replace the built-in event box. Defaults to `DefaultEvent`. */
-  renderEvent?: RenderEvent<T>; /** Stable key per event. Defaults to start-time + index. */
+  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;
   onLongPressDay?: (date: Date) => void;
@@ -327,6 +376,7 @@ declare function MonthListInner<T>({
   date,
   events,
   weekStartsOn,
+  weekdayFormat,
   weekRowHeight: weekRowHeightProp,
   monthHeaderHeight,
   maxVisibleEventCount,
@@ -345,6 +395,7 @@ declare function MonthListInner<T>({
   isDateDisabled,
   calendarCellStyle,
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   onPressDay,
   onLongPressDay,
@@ -391,9 +442,10 @@ declare function DefaultMonthEvent<T>({
   showTime,
   ellipsizeTitle,
   allDayLabel,
+  accessibilityLabel: accessibilityLabelProp,
   cellStyle,
   onPress,
   onLongPress
 }: RenderEventArgs<T>): ReactElement;
 //#endregion
-export { defaultTheme as C, darkTheme as S, useCalendarTheme as T, TimeGridMode as _, MonthPagerProps as a, CalendarThemeProvider as b, BusinessHours as c, EventKeyExtractor as d, ICalendarEvent as f, RenderEventArgs as g, RenderEvent as h, MonthPager as i, CalendarEvent$1 as l, RecurrenceRule as m, MonthList as n, MonthView as o, RecurrenceFrequency as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, WeekStartsOn as v, mergeTheme as w, PartialCalendarTheme as x, CalendarTheme as y };
+export { CalendarThemeProvider as C, mergeTheme as D, defaultTheme as E, useCalendarTheme as O, CalendarTheme as S, darkTheme as T, RenderEvent as _, MonthPagerProps as a, WeekStartsOn as b, BusinessHours as c, EventAccessibilityLabelContext as d, EventAccessibilityLabeler$1 as f, RecurrenceRule as g, RecurrenceFrequency as h, MonthPager as i, CalendarEvent$1 as l, ICalendarEvent as m, MonthList as n, MonthView as o, EventKeyExtractor as p, MonthListProps as r, MonthViewProps as s, DefaultMonthEvent as t, CalendarMode$1 as u, RenderEventArgs as v, PartialCalendarTheme as w, WeekdayFormat$1 as x, TimeGridMode as y };

package/dist/{MonthList-ege6HsEP.js → MonthList-DWAjW5R7.js}

@@ -18,6 +18,10 @@ const defaultTheme = {
 			fontSize: 13,
 			fontWeight: "700"
 		},
+		monthTitle: {
+			fontSize: 17,
+			fontWeight: "700"
+		},
 		dateCell: {
 			fontSize: 13,
 			fontWeight: "700"
@@ -33,6 +37,23 @@ const defaultTheme = {
 			lineHeight: 16
 		}
 	},
+	containers: {
+		monthContainer: {},
+		weekdayHeader: {},
+		weekRow: {},
+		dayCell: {},
+		dayBadge: {},
+		monthEvent: {},
+		columnHeader: {},
+		timeGridEvent: {},
+		nowIndicator: {},
+		resourceRow: {},
+		resourceLabel: {},
+		agendaList: {},
+		agendaRow: {},
+		allDayLane: {},
+		allDayColumn: {}
+	},
 	todayBadgeRadius: 999,
 	rangeBandHeight: 22
 };
@@ -44,6 +65,7 @@ const defaultTheme = {
 const darkTheme = {
 	colors: _super_calendar_core.darkColors,
 	text: defaultTheme.text,
+	containers: defaultTheme.containers,
 	todayBadgeRadius: defaultTheme.todayBadgeRadius,
 	rangeBandHeight: defaultTheme.rangeBandHeight
 };
@@ -59,6 +81,10 @@ function mergeTheme(theme) {
 			...defaultTheme.text,
 			...theme.text
 		},
+		containers: {
+			...defaultTheme.containers,
+			...theme.containers
+		},
 		todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius,
 		rangeBandHeight: theme.rangeBandHeight ?? defaultTheme.rangeBandHeight
 	};
@@ -105,6 +131,29 @@ function useWebPagerKeys(enabled, onPage) {
 	}, [enabled, onPage]);
 }
 //#endregion
+//#region src/utils/withEventAccessibilityLabel.tsx
+/**
+* Wrap an event renderer so it injects a consumer's `eventAccessibilityLabel`
+* override into `RenderEventArgs.accessibilityLabel`. The built-in renderers use
+* that string in place of their default label, and custom renderers can read it
+* too. Returns the renderer unchanged when no override is set, so the common path
+* pays nothing.
+*/
+function withEventAccessibilityLabel(renderEvent, labeler, ampm) {
+	if (!labeler) return renderEvent;
+	const Base = renderEvent;
+	return function LabeledEvent(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Base, {
+			...props,
+			accessibilityLabel: labeler(props.event, {
+				mode: props.mode,
+				isAllDay: props.isAllDay ?? false,
+				ampm
+			})
+		});
+	};
+}
+//#endregion
 //#region src/components/MonthView.tsx
 const isWeb$2 = react_native.Platform.OS === "web";
 const DAY_CELL_PADDING_TOP = 4;
@@ -114,7 +163,7 @@ const CELL_ROW_GAP = 2;
 const CHIP_PADDING_V = 2;
 const FALLBACK_VISIBLE_COUNT = 3;
 const numericStyle = (value, fallback) => typeof value === "number" ? value : fallback;
-function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView = true, moreLabel = "{moreCount} More", showAdjacentMonths = true, disableMonthEventCellPress = false, isRTL = false, showSixWeeks = false, showTitle = true, showWeekdays = true, activeDate, selectedDates: selectedDatesProp, selectedRange: selectedRangeProp, fillCellOnSelection = false, minDate: minDateProp, maxDate: maxDateProp, isDateDisabled: isDateDisabledProp, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter }) {
+function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", locale, sortedMonthView = true, moreLabel = "{moreCount} More", showAdjacentMonths = true, disableMonthEventCellPress = false, isRTL = false, showSixWeeks = false, showTitle = true, showWeekdays = true, activeDate, selectedDates: selectedDatesProp, selectedRange: selectedRangeProp, fillCellOnSelection = false, minDate: minDateProp, maxDate: maxDateProp, isDateDisabled: isDateDisabledProp, calendarCellStyle, renderEvent, eventAccessibilityLabel, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, renderCustomDateForMonth, onDayPointerDown, onDayPointerEnter }) {
 	const theme = useCalendarTheme();
 	const selection = (0, _super_calendar_core.useCalendarSelection)();
 	const selectedDates = selectedDatesProp ?? selection.selectedDates;
@@ -122,7 +171,7 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 	const minDate = minDateProp ?? selection.minDate;
 	const maxDate = maxDateProp ?? selection.maxDate;
 	const isDateDisabled = isDateDisabledProp ?? selection.isDateDisabled;
-	const RenderEventComponent = renderEvent;
+	const RenderEventComponent = (0, react.useMemo)(() => withEventAccessibilityLabel(renderEvent, eventAccessibilityLabel, false), [renderEvent, eventAccessibilityLabel]);
 	const [gridHeight, setGridHeight] = (0, react.useState)(0);
 	const [hoveredKey, setHoveredKey] = (0, react.useState)(null);
 	const [pressedKey, setPressedKey] = (0, react.useState)(null);
@@ -172,11 +221,15 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 	const showGrid = events.length > 0;
 	const renderDay = (day) => {
 		const isCurrentMonth = (0, date_fns.isSameMonth)(day, date);
-		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles$3.dayCell, showGrid && {
-			borderTopWidth: react_native.StyleSheet.hairlineWidth,
-			borderRightWidth: react_native.StyleSheet.hairlineWidth,
-			borderColor: theme.colors.gridLine
-		}] }, day.toISOString());
+		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [
+			styles$3.dayCell,
+			showGrid && {
+				borderTopWidth: react_native.StyleSheet.hairlineWidth,
+				borderRightWidth: react_native.StyleSheet.hairlineWidth,
+				borderColor: theme.colors.gridLine
+			},
+			theme.containers.dayCell
+		] }, day.toISOString());
 		const dayEvents = eventsByDay.get((0, date_fns.startOfDay)(day).toISOString()) ?? [];
 		const isToday = (0, _super_calendar_core.getIsToday)(day);
 		const isHighlighted = activeDate ? (0, _super_calendar_core.isSameCalendarDay)(day, activeDate) : isToday;
@@ -213,7 +266,8 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 					borderColor: theme.colors.gridLine
 				},
 				(0, _super_calendar_core.isWeekend)(day) && { backgroundColor: theme.colors.weekendBackground },
-				calendarCellStyle?.(day)
+				calendarCellStyle?.(day),
+				theme.containers.dayCell
 			],
 			activeOpacity: showGrid ? .2 : 1,
 			...showGrid ? null : {
@@ -276,7 +330,8 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 							backgroundColor: theme.colors.hoverBackground,
 							borderRadius: theme.todayBadgeRadius
 						},
-						!showGrid && pressedKey === dayKey && { opacity: .2 }
+						!showGrid && pressedKey === dayKey && { opacity: .2 },
+						theme.containers.dayBadge
 					],
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
 						style: [theme.text.dateCell, { color: dateColor }],
@@ -285,7 +340,7 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 					})
 				}),
 				dayEvents.slice(0, visibleCount).map((event, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-					style: styles$3.monthEvent,
+					style: [styles$3.monthEvent, theme.containers.monthEvent],
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderEventComponent, {
 						event,
 						mode: "month",
@@ -317,12 +372,16 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 		style: styles$3.root,
 		children: [
 			showTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-				style: [styles$3.title, { color: theme.colors.text }],
+				style: [
+					styles$3.title,
+					theme.text.monthTitle,
+					{ color: theme.colors.text }
+				],
 				allowFontScaling: false,
 				children: (0, date_fns.format)(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}) : null,
 			showWeekdays ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: styles$3.weekdayHeader,
+				style: [styles$3.weekdayHeader, theme.containers.weekdayHeader],
 				children: weekdayLabels.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
 					style: [
 						theme.text.weekday,
@@ -330,14 +389,14 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 						{ color: theme.colors.textMuted }
 					],
 					allowFontScaling: false,
-					children: (0, date_fns.format)(day, "EEE", { locale })
+					children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
 				style: styles$3.container,
 				onLayout: handleLayout,
 				children: weeks.map((week) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-					style: styles$3.weekRow,
+					style: [styles$3.weekRow, theme.containers.weekRow],
 					children: week.map((day) => renderDay(day))
 				}, week[0].toISOString()))
 			})
@@ -364,8 +423,6 @@ const MonthView = (0, react.memo)(MonthViewInner);
 const styles$3 = react_native.StyleSheet.create({
 	root: { flex: 1 },
 	title: {
-		fontSize: 17,
-		fontWeight: "700",
 		paddingTop: 10,
 		paddingHorizontal: 14,
 		paddingBottom: 6
@@ -417,7 +474,7 @@ const styles$3 = react_native.StyleSheet.create({
 const isWeb$1 = react_native.Platform.OS === "web";
 const PAGE_WINDOW$1 = 60;
 const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
-function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth }) {
+function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, weekdayFormat = "short", locale, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, isRTL, calendarCellStyle, renderEvent, keyExtractor, onPressDay, onLongPressDay, onPressEvent, onLongPressEvent, onPressMore, onChangeDate, freeSwipe = false, swipeEnabled = true, showSixWeeks = false, activeDate, renderHeaderForMonthView, renderCustomDateForMonth }) {
 	const theme = useCalendarTheme();
 	const { width, height } = (0, react_native.useWindowDimensions)();
 	const listRef = (0, react.useRef)(null);
@@ -545,15 +602,20 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 		ref: containerRef,
-		style: styles$2.container,
+		style: [styles$2.container, theme.containers.monthContainer],
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-				style: [styles$2.monthTitle, { color: theme.colors.text }],
+				style: [
+					styles$2.monthTitle,
+					theme.text.monthTitle,
+					{ color: theme.colors.text }
+				],
 				allowFontScaling: false,
 				children: (0, date_fns.format)(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}),
 			renderHeaderForMonthView ? renderHeaderForMonthView(weekDays) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthWeekdayHeader, {
 				weekDays,
+				weekdayFormat,
 				locale
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
@@ -604,10 +666,10 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 * ```
 */
 const MonthPager = (0, react.memo)(MonthPagerInner);
-const MonthWeekdayHeader = ({ weekDays, locale }) => {
+const MonthWeekdayHeader = ({ weekDays, weekdayFormat = "short", locale }) => {
 	const theme = useCalendarTheme();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-		style: styles$2.weekdayHeader,
+		style: [styles$2.weekdayHeader, theme.containers.weekdayHeader],
 		children: weekDays.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
 			style: [
 				theme.text.weekday,
@@ -615,7 +677,7 @@ const MonthWeekdayHeader = ({ weekDays, locale }) => {
 				{ color: theme.colors.textMuted }
 			],
 			allowFontScaling: false,
-			children: (0, date_fns.format)(day, "EEE", { locale })
+			children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 		}, day.toISOString()))
 	});
 };
@@ -625,8 +687,6 @@ const styles$2 = react_native.StyleSheet.create({
 	pagerList: { flex: 1 },
 	webNoScroll: { overflow: "hidden" },
 	monthTitle: {
-		fontSize: 17,
-		fontWeight: "700",
 		paddingTop: 10,
 		paddingHorizontal: 14,
 		paddingBottom: 6
@@ -649,7 +709,7 @@ const styles$2 = react_native.StyleSheet.create({
 * default renderer for `MonthList`, so the `/picker` entry point stays free of
 * Reanimated.
 */
-function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, cellStyle, onPress, onLongPress }) {
+function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, accessibilityLabel: accessibilityLabelProp, cellStyle, onPress, onLongPress }) {
 	const theme = useCalendarTheme();
 	const isAllDayEvent = isAllDay ?? false;
 	const timeLabel = (0, _super_calendar_core.eventTimeLabel)({
@@ -662,7 +722,7 @@ function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = tru
 		allDayLabel
 	});
 	const ellipsizeMode = (0, _super_calendar_core.titleEllipsizeMode)(ellipsizeTitle);
-	const accessibilityLabel = (0, _super_calendar_core.eventAccessibilityLabel)({
+	const accessibilityLabel = accessibilityLabelProp ?? (0, _super_calendar_core.eventAccessibilityLabel)({
 		title: event.title,
 		isAllDay: isAllDayEvent,
 		start: event.start,
@@ -731,7 +791,7 @@ const AUTOSCROLL_INTERVAL_MS = 16;
 const NO_EVENTS = [];
 const noop = () => {};
 const defaultKeyExtractor = (event) => `${event.start.toISOString()}|${event.end.toISOString()}|${event.title ?? ""}`;
-function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight: weekRowHeightProp, monthHeaderHeight = DEFAULT_MONTH_HEADER_HEIGHT, maxVisibleEventCount, locale, sortedMonthView, moreLabel, showAdjacentMonths = false, disableMonthEventCellPress, isRTL, activeDate, selectedDates, selectedRange, fillCellOnSelection, minDate, maxDate, isDateDisabled, calendarCellStyle, renderEvent = DefaultMonthEvent, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader }) {
+function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekdayFormat = "short", weekRowHeight: weekRowHeightProp, monthHeaderHeight = DEFAULT_MONTH_HEADER_HEIGHT, maxVisibleEventCount, locale, sortedMonthView, moreLabel, showAdjacentMonths = false, disableMonthEventCellPress, isRTL, activeDate, selectedDates, selectedRange, fillCellOnSelection, minDate, maxDate, isDateDisabled, calendarCellStyle, renderEvent = DefaultMonthEvent, eventAccessibilityLabel, keyExtractor = defaultKeyExtractor, onPressDay, onLongPressDay, onPressEvent = noop, onLongPressEvent, onPressMore, onSelectDrag, onChangeVisibleMonth, renderMonthHeader }) {
 	const theme = useCalendarTheme();
 	const listRef = (0, react.useRef)(null);
 	const weekRowHeight = weekRowHeightProp ?? (events.length > 0 ? DEFAULT_EVENT_WEEK_ROW_HEIGHT : DEFAULT_WEEK_ROW_HEIGHT);
@@ -951,6 +1011,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				fillCellOnSelection,
 				calendarCellStyle,
 				renderEvent,
+				eventAccessibilityLabel,
 				keyExtractor,
 				onPressDay: dragEnabled ? handlePressDay : onPressDay,
 				onLongPressDay,
@@ -1022,7 +1083,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				children: weekDays.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
 					style: [styles.weekdayLabel, { color: theme.colors.textMuted }],
 					allowFontScaling: false,
-					children: (0, date_fns.format)(day, "EEE", { locale })
+					children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}), dragGesture && !isWeb ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureDetector, {
 				gesture: dragGesture,
@@ -1146,3 +1207,9 @@ Object.defineProperty(exports, "useWebPagerKeys", {
 		return useWebPagerKeys;
 	}
 });
+Object.defineProperty(exports, "withEventAccessibilityLabel", {
+	enumerable: true,
+	get: function() {
+		return withEventAccessibilityLabel;
+	}
+});