@super-calendar/native 2.1.5 → 2.3.0

package/dist/{MonthList-BKlLes2B.mjs → MonthList-BidXJMfm.mjs}

@@ -1,6 +1,6 @@
 import { addMonths, differenceInCalendarMonths, format, isSameMonth, startOfDay, startOfMonth } from "date-fns";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { CalendarSelectionProvider, buildMonthWeeks, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventTimeLabel, getIsToday, getWeekDays, groupEventsByDay, isAllDayEvent, isDateSelectable, isSameCalendarDay, isWeekend, lightColors, monthEventCapacity, monthVisibleCount, rangeBandKind, titleEllipsizeMode, titleNumberOfLines, useCalendarSelection } from "@super-calendar/core";
+import { CalendarSelectionProvider, buildMonthWeeks, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventTimeLabel, getIsToday, getWeekDays, groupEventsByDay, isAllDayEvent, isDateSelectable, isSameCalendarDay, isWeekend, lightColors, monthEventCapacity, monthVisibleCount, rangeBandKind, titleEllipsizeMode, titleNumberOfLines, useCalendarSelection, weekdayFormatToken } from "@super-calendar/core";
 import { LegendList } from "@legendapp/list/react-native";
 import { Platform, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,13 +11,21 @@ const defaultTheme = {
 	colors: lightColors,
 	text: {
 		dayNumber: {
-			fontSize: 22,
-			fontWeight: "700"
+			fontSize: 15,
+			fontWeight: "600"
+		},
+		columnHeaderWeekday: {
+			fontSize: 11,
+			fontWeight: "600"
 		},
 		weekday: {
 			fontSize: 13,
 			fontWeight: "700"
 		},
+		monthTitle: {
+			fontSize: 17,
+			fontWeight: "700"
+		},
 		dateCell: {
 			fontSize: 13,
 			fontWeight: "700"
@@ -33,6 +41,24 @@ const defaultTheme = {
 			lineHeight: 16
 		}
 	},
+	containers: {
+		monthContainer: {},
+		weekdayHeader: {},
+		weekRow: {},
+		dayCell: {},
+		dayBadge: {},
+		monthEvent: {},
+		columnHeader: {},
+		columnHeaderBadge: {},
+		timeGridEvent: {},
+		nowIndicator: {},
+		resourceRow: {},
+		resourceLabel: {},
+		agendaList: {},
+		agendaRow: {},
+		allDayLane: {},
+		allDayColumn: {}
+	},
 	todayBadgeRadius: 999,
 	rangeBandHeight: 22
 };
@@ -44,6 +70,7 @@ const defaultTheme = {
 const darkTheme = {
 	colors: darkColors,
 	text: defaultTheme.text,
+	containers: defaultTheme.containers,
 	todayBadgeRadius: defaultTheme.todayBadgeRadius,
 	rangeBandHeight: defaultTheme.rangeBandHeight
 };
@@ -59,6 +86,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 +136,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__ */ jsx(Base, {
+			...props,
+			accessibilityLabel: labeler(props.event, {
+				mode: props.mode,
+				isAllDay: props.isAllDay ?? false,
+				ampm
+			})
+		});
+	};
+}
+//#endregion
 //#region src/components/MonthView.tsx
 const isWeb$2 = Platform.OS === "web";
 const DAY_CELL_PADDING_TOP = 4;
@@ -114,7 +168,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 = useCalendarSelection();
 	const selectedDates = selectedDatesProp ?? selection.selectedDates;
@@ -122,7 +176,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 = useMemo(() => withEventAccessibilityLabel(renderEvent, eventAccessibilityLabel, false), [renderEvent, eventAccessibilityLabel]);
 	const [gridHeight, setGridHeight] = useState(0);
 	const [hoveredKey, setHoveredKey] = useState(null);
 	const [pressedKey, setPressedKey] = useState(null);
@@ -172,11 +226,15 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 	const showGrid = events.length > 0;
 	const renderDay = (day) => {
 		const isCurrentMonth = isSameMonth(day, date);
-		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ jsx(View, { style: [styles$3.dayCell, showGrid && {
-			borderTopWidth: StyleSheet.hairlineWidth,
-			borderRightWidth: StyleSheet.hairlineWidth,
-			borderColor: theme.colors.gridLine
-		}] }, day.toISOString());
+		if (!isCurrentMonth && !showAdjacentMonths) return /* @__PURE__ */ jsx(View, { style: [
+			styles$3.dayCell,
+			showGrid && {
+				borderTopWidth: StyleSheet.hairlineWidth,
+				borderRightWidth: StyleSheet.hairlineWidth,
+				borderColor: theme.colors.gridLine
+			},
+			theme.containers.dayCell
+		] }, day.toISOString());
 		const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
 		const isToday = getIsToday(day);
 		const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
@@ -213,7 +271,8 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 					borderColor: theme.colors.gridLine
 				},
 				isWeekend(day) && { backgroundColor: theme.colors.weekendBackground },
-				calendarCellStyle?.(day)
+				calendarCellStyle?.(day),
+				theme.containers.dayCell
 			],
 			activeOpacity: showGrid ? .2 : 1,
 			...showGrid ? null : {
@@ -276,7 +335,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__ */ jsx(Text, {
 						style: [theme.text.dateCell, { color: dateColor }],
@@ -285,7 +345,7 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 					})
 				}),
 				dayEvents.slice(0, visibleCount).map((event, index) => /* @__PURE__ */ jsx(View, {
-					style: styles$3.monthEvent,
+					style: [styles$3.monthEvent, theme.containers.monthEvent],
 					children: /* @__PURE__ */ jsx(RenderEventComponent, {
 						event,
 						mode: "month",
@@ -317,12 +377,16 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 		style: styles$3.root,
 		children: [
 			showTitle ? /* @__PURE__ */ jsx(Text, {
-				style: [styles$3.title, { color: theme.colors.text }],
+				style: [
+					styles$3.title,
+					theme.text.monthTitle,
+					{ color: theme.colors.text }
+				],
 				allowFontScaling: false,
 				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}) : null,
 			showWeekdays ? /* @__PURE__ */ jsx(View, {
-				style: styles$3.weekdayHeader,
+				style: [styles$3.weekdayHeader, theme.containers.weekdayHeader],
 				children: weekdayLabels.map((day) => /* @__PURE__ */ jsx(Text, {
 					style: [
 						theme.text.weekday,
@@ -330,14 +394,14 @@ function MonthViewInner({ date, events, maxVisibleEventCount, weekStartsOn, loca
 						{ color: theme.colors.textMuted }
 					],
 					allowFontScaling: false,
-					children: format(day, "EEE", { locale })
+					children: format(day, weekdayFormatToken(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}) : null,
 			/* @__PURE__ */ jsx(View, {
 				style: styles$3.container,
 				onLayout: handleLayout,
 				children: weeks.map((week) => /* @__PURE__ */ jsx(View, {
-					style: styles$3.weekRow,
+					style: [styles$3.weekRow, theme.containers.weekRow],
 					children: week.map((day) => renderDay(day))
 				}, week[0].toISOString()))
 			})
@@ -364,8 +428,6 @@ const MonthView = memo(MonthViewInner);
 const styles$3 = StyleSheet.create({
 	root: { flex: 1 },
 	title: {
-		fontSize: 17,
-		fontWeight: "700",
 		paddingTop: 10,
 		paddingHorizontal: 14,
 		paddingBottom: 6
@@ -417,7 +479,7 @@ const styles$3 = StyleSheet.create({
 const isWeb$1 = 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 } = useWindowDimensions();
 	const listRef = useRef(null);
@@ -545,15 +607,20 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 	]);
 	return /* @__PURE__ */ jsxs(View, {
 		ref: containerRef,
-		style: styles$2.container,
+		style: [styles$2.container, theme.containers.monthContainer],
 		children: [
 			/* @__PURE__ */ jsx(Text, {
-				style: [styles$2.monthTitle, { color: theme.colors.text }],
+				style: [
+					styles$2.monthTitle,
+					theme.text.monthTitle,
+					{ color: theme.colors.text }
+				],
 				allowFontScaling: false,
 				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
 			}),
 			renderHeaderForMonthView ? renderHeaderForMonthView(weekDays) : /* @__PURE__ */ jsx(MonthWeekdayHeader, {
 				weekDays,
+				weekdayFormat,
 				locale
 			}),
 			/* @__PURE__ */ jsx(View, {
@@ -604,10 +671,10 @@ function MonthPagerInner({ date, events, maxVisibleEventCount, weekStartsOn, loc
 * ```
 */
 const MonthPager = memo(MonthPagerInner);
-const MonthWeekdayHeader = ({ weekDays, locale }) => {
+const MonthWeekdayHeader = ({ weekDays, weekdayFormat = "short", locale }) => {
 	const theme = useCalendarTheme();
 	return /* @__PURE__ */ jsx(View, {
-		style: styles$2.weekdayHeader,
+		style: [styles$2.weekdayHeader, theme.containers.weekdayHeader],
 		children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
 			style: [
 				theme.text.weekday,
@@ -615,7 +682,7 @@ const MonthWeekdayHeader = ({ weekDays, locale }) => {
 				{ color: theme.colors.textMuted }
 			],
 			allowFontScaling: false,
-			children: format(day, "EEE", { locale })
+			children: format(day, weekdayFormatToken(weekdayFormat), { locale })
 		}, day.toISOString()))
 	});
 };
@@ -625,8 +692,6 @@ const styles$2 = StyleSheet.create({
 	pagerList: { flex: 1 },
 	webNoScroll: { overflow: "hidden" },
 	monthTitle: {
-		fontSize: 17,
-		fontWeight: "700",
 		paddingTop: 10,
 		paddingHorizontal: 14,
 		paddingBottom: 6
@@ -649,7 +714,7 @@ const styles$2 = 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 = eventTimeLabel({
@@ -662,7 +727,7 @@ function DefaultMonthEvent({ event, mode, isAllDay, ampm = false, showTime = tru
 		allDayLabel
 	});
 	const ellipsizeMode = titleEllipsizeMode(ellipsizeTitle);
-	const accessibilityLabel = eventAccessibilityLabel({
+	const accessibilityLabel = accessibilityLabelProp ?? eventAccessibilityLabel({
 		title: event.title,
 		isAllDay: isAllDayEvent,
 		start: event.start,
@@ -731,7 +796,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 = useRef(null);
 	const weekRowHeight = weekRowHeightProp ?? (events.length > 0 ? DEFAULT_EVENT_WEEK_ROW_HEIGHT : DEFAULT_WEEK_ROW_HEIGHT);
@@ -951,6 +1016,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				fillCellOnSelection,
 				calendarCellStyle,
 				renderEvent,
+				eventAccessibilityLabel,
 				keyExtractor,
 				onPressDay: dragEnabled ? handlePressDay : onPressDay,
 				onLongPressDay,
@@ -1022,7 +1088,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				children: weekDays.map((day) => /* @__PURE__ */ jsx(Text, {
 					style: [styles.weekdayLabel, { color: theme.colors.textMuted }],
 					allowFontScaling: false,
-					children: format(day, "EEE", { locale })
+					children: format(day, weekdayFormatToken(weekdayFormat), { locale })
 				}, day.toISOString()))
 			}), dragGesture && !isWeb ? /* @__PURE__ */ jsx(GestureDetector, {
 				gesture: dragGesture,
@@ -1086,4 +1152,4 @@ const styles = StyleSheet.create({
 	}
 });
 //#endregion
-export { useWebPagerKeys as a, defaultTheme as c, MonthView as i, mergeTheme as l, DefaultMonthEvent as n, CalendarThemeProvider as o, MonthPager as r, darkTheme as s, MonthList as t, useCalendarTheme as u };
+export { withEventAccessibilityLabel as a, darkTheme as c, useCalendarTheme as d, MonthView as i, defaultTheme as l, DefaultMonthEvent as n, useWebPagerKeys as o, MonthPager as r, CalendarThemeProvider as s, MonthList as t, mergeTheme as u };

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

@@ -11,13 +11,21 @@ const defaultTheme = {
 	colors: _super_calendar_core.lightColors,
 	text: {
 		dayNumber: {
-			fontSize: 22,
-			fontWeight: "700"
+			fontSize: 15,
+			fontWeight: "600"
+		},
+		columnHeaderWeekday: {
+			fontSize: 11,
+			fontWeight: "600"
 		},
 		weekday: {
 			fontSize: 13,
 			fontWeight: "700"
 		},
+		monthTitle: {
+			fontSize: 17,
+			fontWeight: "700"
+		},
 		dateCell: {
 			fontSize: 13,
 			fontWeight: "700"
@@ -33,6 +41,24 @@ const defaultTheme = {
 			lineHeight: 16
 		}
 	},
+	containers: {
+		monthContainer: {},
+		weekdayHeader: {},
+		weekRow: {},
+		dayCell: {},
+		dayBadge: {},
+		monthEvent: {},
+		columnHeader: {},
+		columnHeaderBadge: {},
+		timeGridEvent: {},
+		nowIndicator: {},
+		resourceRow: {},
+		resourceLabel: {},
+		agendaList: {},
+		agendaRow: {},
+		allDayLane: {},
+		allDayColumn: {}
+	},
 	todayBadgeRadius: 999,
 	rangeBandHeight: 22
 };
@@ -44,6 +70,7 @@ const defaultTheme = {
 const darkTheme = {
 	colors: _super_calendar_core.darkColors,
 	text: defaultTheme.text,
+	containers: defaultTheme.containers,
 	todayBadgeRadius: defaultTheme.todayBadgeRadius,
 	rangeBandHeight: defaultTheme.rangeBandHeight
 };
@@ -59,6 +86,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 +136,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 +168,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 +176,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 +226,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 +271,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 +335,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 +345,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 +377,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 +394,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 +428,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 +479,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 +607,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 +671,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 +682,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 +692,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 +714,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 +727,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 +796,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 +1016,7 @@ function MonthListInner({ date, events = NO_EVENTS, weekStartsOn, weekRowHeight:
 				fillCellOnSelection,
 				calendarCellStyle,
 				renderEvent,
+				eventAccessibilityLabel,
 				keyExtractor,
 				onPressDay: dragEnabled ? handlePressDay : onPressDay,
 				onLongPressDay,
@@ -1022,7 +1088,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 +1212,9 @@ Object.defineProperty(exports, "useWebPagerKeys", {
 		return useWebPagerKeys;
 	}
 });
+Object.defineProperty(exports, "withEventAccessibilityLabel", {
+	enumerable: true,
+	get: function() {
+		return withEventAccessibilityLabel;
+	}
+});