@super-calendar/native 2.2.0 → 2.3.1

package/dist/{DefaultMonthEvent-BlfDkmF5.d.mts → DefaultMonthEvent-BW6qy50X.d.ts}

@@ -1,8 +1,8 @@
 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, 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
 /**
@@ -15,7 +15,8 @@ interface CalendarTheme {
   colors: CalendarColors;
   /** 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. */
+    /** The day number in a time-grid (week/day) column header. */dayNumber: TextStyle; /** The weekday label ("Mon") in a time-grid column header. */
+    columnHeaderWeekday: TextStyle; /** Short weekday label ("Mon") in the month grid's header row. */
     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. */
@@ -36,7 +37,8 @@ interface CalendarTheme {
     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). */
+    columnHeader: ViewStyle; /** The day-number badge (the circle) inside a time-grid column header. */
+    columnHeaderBadge: 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. */

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

@@ -1,8 +1,8 @@
 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, 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
 /**
@@ -15,7 +15,8 @@ interface CalendarTheme {
   colors: CalendarColors;
   /** 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. */
+    /** The day number in a time-grid (week/day) column header. */dayNumber: TextStyle; /** The weekday label ("Mon") in a time-grid column header. */
+    columnHeaderWeekday: TextStyle; /** Short weekday label ("Mon") in the month grid's header row. */
     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. */
@@ -36,7 +37,8 @@ interface CalendarTheme {
     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). */
+    columnHeader: ViewStyle; /** The day-number badge (the circle) inside a time-grid column header. */
+    columnHeaderBadge: 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. */

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

@@ -11,8 +11,12 @@ const defaultTheme = {
 	colors: lightColors,
 	text: {
 		dayNumber: {
-			fontSize: 22,
-			fontWeight: "700"
+			fontSize: 15,
+			fontWeight: "600"
+		},
+		columnHeaderWeekday: {
+			fontSize: 11,
+			fontWeight: "600"
 		},
 		weekday: {
 			fontSize: 13,
@@ -45,6 +49,7 @@ const defaultTheme = {
 		dayBadge: {},
 		monthEvent: {},
 		columnHeader: {},
+		columnHeaderBadge: {},
 		timeGridEvent: {},
 		nowIndicator: {},
 		resourceRow: {},

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

@@ -11,8 +11,12 @@ 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,
@@ -45,6 +49,7 @@ const defaultTheme = {
 		dayBadge: {},
 		monthEvent: {},
 		columnHeader: {},
+		columnHeaderBadge: {},
 		timeGridEvent: {},
 		nowIndicator: {},
 		resourceRow: {},

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-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, c as BusinessHours, d as EventAccessibilityLabelContext, f as EventAccessibilityLabeler, g as RecurrenceRule, h as RecurrenceFrequency, 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, x as WeekdayFormat, y as TimeGridMode } from "./DefaultMonthEvent-BlfDkmF5.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, c as BusinessHours, d as EventAccessibilityLabelContext, f as EventAccessibilityLabeler, g as RecurrenceRule, h as RecurrenceFrequency, 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, x as WeekdayFormat, y as TimeGridMode } from "./DefaultMonthEvent-BbCMc60z.mjs";
 import { Locale } from "date-fns";
 import { ComponentType, ReactElement } from "react";
 import { SharedValue, useSharedValue } from "react-native-reanimated";

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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, c as BusinessHours, d as EventAccessibilityLabelContext, f as EventAccessibilityLabeler, g as RecurrenceRule, h as RecurrenceFrequency, 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, x as WeekdayFormat, y as TimeGridMode } from "./DefaultMonthEvent-Cagj4aBo.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, c as BusinessHours, d as EventAccessibilityLabelContext, f as EventAccessibilityLabeler, g as RecurrenceRule, h as RecurrenceFrequency, 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, x as WeekdayFormat, y as TimeGridMode } from "./DefaultMonthEvent-BW6qy50X.js";
 import { Locale } from "date-fns";
 import { ComponentType, ReactElement } from "react";
 import { StyleProp, ViewStyle } from "react-native";

package/dist/index.js

@@ -21,7 +21,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-const require_MonthList = require("./MonthList-DWAjW5R7.js");
+const require_MonthList = require("./MonthList-CFXm7BK_.js");
 let date_fns = require("date-fns");
 let react = require("react");
 let react_native_reanimated = require("react-native-reanimated");
@@ -1357,14 +1357,20 @@ const DayHeader = ({ day, width, weekdayFormat = "short", locale, activeDate, on
 		onPress: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
 		disabled: !onPressDateHeader,
 		accessibilityRole: onPressDateHeader ? "button" : void 0,
+		accessibilityLabel: onPressDateHeader ? (0, date_fns.format)(day, "EEEE d MMMM", { locale }) : void 0,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-			style: [styles$1.dayHeaderWeekday, { color: theme.colors.textMuted }],
+			style: [{ color: theme.colors.textMuted }, theme.text.columnHeaderWeekday],
 			allowFontScaling: false,
 			children: (0, date_fns.format)(day, (0, _super_calendar_core.weekdayFormatToken)(weekdayFormat), { locale })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-			style: [styles$1.dayHeaderBadge, isHighlighted && { backgroundColor: theme.colors.todayBackground }],
+			testID: "column-header-badge",
+			style: [
+				styles$1.dayHeaderBadge,
+				theme.containers.columnHeaderBadge,
+				isHighlighted && { backgroundColor: theme.colors.todayBackground }
+			],
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
-				style: [styles$1.dayHeaderNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
+				style: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
 				allowFontScaling: false,
 				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
 				children: day.getDate()
@@ -1390,10 +1396,6 @@ const styles$1 = react_native.StyleSheet.create({
 		gap: 2,
 		paddingVertical: 6
 	},
-	dayHeaderWeekday: {
-		fontSize: 11,
-		fontWeight: "600"
-	},
 	dayHeaderBadge: {
 		width: 28,
 		height: 28,
@@ -1401,10 +1403,6 @@ const styles$1 = react_native.StyleSheet.create({
 		justifyContent: "center",
 		alignItems: "center"
 	},
-	dayHeaderNumber: {
-		fontSize: 15,
-		fontWeight: "600"
-	},
 	content: {
 		width: "100%",
 		position: "relative"

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as withEventAccessibilityLabel, c as darkTheme, d as useCalendarTheme, i as MonthView, l as defaultTheme, n as DefaultMonthEvent, o as useWebPagerKeys, r as MonthPager, s as CalendarThemeProvider, t as MonthList, u as mergeTheme } from "./MonthList-DZx8rPle.mjs";
+import { a as withEventAccessibilityLabel, c as darkTheme, d as useCalendarTheme, i as MonthView, l as defaultTheme, n as DefaultMonthEvent, o as useWebPagerKeys, r as MonthPager, s as CalendarThemeProvider, t as MonthList, u as mergeTheme } from "./MonthList-BidXJMfm.mjs";
 import { addDays, differenceInCalendarDays, endOfDay, endOfMonth, endOfWeek, format, getHours, getISOWeek, getMinutes, isSameDay, startOfDay, startOfMonth, startOfWeek } from "date-fns";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Animated, { runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef, useAnimatedScrollHandler, useAnimatedStyle, useDerivedValue, useSharedValue } from "react-native-reanimated";
@@ -1333,14 +1333,20 @@ const DayHeader = ({ day, width, weekdayFormat = "short", locale, activeDate, on
 		onPress: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
 		disabled: !onPressDateHeader,
 		accessibilityRole: onPressDateHeader ? "button" : void 0,
+		accessibilityLabel: onPressDateHeader ? format(day, "EEEE d MMMM", { locale }) : void 0,
 		children: [/* @__PURE__ */ jsx(Text, {
-			style: [styles$1.dayHeaderWeekday, { color: theme.colors.textMuted }],
+			style: [{ color: theme.colors.textMuted }, theme.text.columnHeaderWeekday],
 			allowFontScaling: false,
 			children: format(day, weekdayFormatToken$1(weekdayFormat), { locale })
 		}), /* @__PURE__ */ jsx(View, {
-			style: [styles$1.dayHeaderBadge, isHighlighted && { backgroundColor: theme.colors.todayBackground }],
+			testID: "column-header-badge",
+			style: [
+				styles$1.dayHeaderBadge,
+				theme.containers.columnHeaderBadge,
+				isHighlighted && { backgroundColor: theme.colors.todayBackground }
+			],
 			children: /* @__PURE__ */ jsx(Text, {
-				style: [styles$1.dayHeaderNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
+				style: [theme.text.dayNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
 				allowFontScaling: false,
 				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
 				children: day.getDate()
@@ -1366,10 +1372,6 @@ const styles$1 = StyleSheet.create({
 		gap: 2,
 		paddingVertical: 6
 	},
-	dayHeaderWeekday: {
-		fontSize: 11,
-		fontWeight: "600"
-	},
 	dayHeaderBadge: {
 		width: 28,
 		height: 28,
@@ -1377,10 +1379,6 @@ const styles$1 = StyleSheet.create({
 		justifyContent: "center",
 		alignItems: "center"
 	},
-	dayHeaderNumber: {
-		fontSize: 15,
-		fontWeight: "600"
-	},
 	content: {
 		width: "100%",
 		position: "relative"

package/dist/picker.d.mts

@@ -1,3 +1,3 @@
-import { C as CalendarThemeProvider, D as mergeTheme, E as defaultTheme, O as useCalendarTheme, S as CalendarTheme, T as darkTheme, _ as RenderEvent, a as MonthPagerProps, b as WeekStartsOn, i as MonthPager, l as CalendarEvent, m as ICalendarEvent, n as MonthList, o as MonthView, p as EventKeyExtractor, r as MonthListProps, s as MonthViewProps, t as DefaultMonthEvent, u as CalendarMode, v as RenderEventArgs, w as PartialCalendarTheme } from "./DefaultMonthEvent-BlfDkmF5.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 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-Cagj4aBo.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-DWAjW5R7.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 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-DZx8rPle.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.2.0",
+  "version": "2.3.1",
   "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.2.0"
+    "@super-calendar/core": "2.3.1"
   },
   "peerDependencies": {
     "@legendapp/list": ">=3",

package/src/components/TimeGrid.tsx

@@ -1852,24 +1852,32 @@ const DayHeader = ({
       onPress={onPressDateHeader ? () => onPressDateHeader(day) : undefined}
       disabled={!onPressDateHeader}
       accessibilityRole={onPressDateHeader ? "button" : undefined}
+      // A pressable header announces the full date it opens; a static one lets
+      // the child labels speak for themselves.
+      accessibilityLabel={onPressDateHeader ? format(day, "EEEE d MMMM", { locale }) : undefined}
     >
       {/* Mirrors the dom renderer's header: the muted weekday label sits above the
-          day number, and the number's circle fills for today / the active date. */}
+          day number, and the number's circle fills for today / the active date.
+          Theme text merges after the muted colour so a themed colour wins. */}
       <Text
-        style={[styles.dayHeaderWeekday, { color: theme.colors.textMuted }]}
+        style={[{ color: theme.colors.textMuted }, theme.text.columnHeaderWeekday]}
         allowFontScaling={false}
       >
         {format(day, weekdayFormatToken(weekdayFormat), { locale })}
       </Text>
       <View
+        testID="column-header-badge"
         style={[
           styles.dayHeaderBadge,
+          theme.containers.columnHeaderBadge,
           isHighlighted && { backgroundColor: theme.colors.todayBackground },
         ]}
       >
         <Text
           style={[
-            styles.dayHeaderNumber,
+            theme.text.dayNumber,
+            // The state colour stays last so a themed dayNumber can't break the
+            // today/active contrast.
             { color: isHighlighted ? theme.colors.todayText : theme.colors.text },
           ]}
           allowFontScaling={false}
@@ -1909,10 +1917,6 @@ const styles = StyleSheet.create({
     gap: 2,
     paddingVertical: 6,
   },
-  dayHeaderWeekday: {
-    fontSize: 11,
-    fontWeight: "600",
-  },
   dayHeaderBadge: {
     // A fixed circle so the today/active fill never shifts the header's height.
     width: 28,
@@ -1921,10 +1925,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  dayHeaderNumber: {
-    fontSize: 15,
-    fontWeight: "600",
-  },
   content: {
     width: "100%",
     position: "relative",

package/src/theme.ts

@@ -12,9 +12,11 @@ export interface CalendarTheme {
   colors: CalendarColors;
   /** Text styles for the calendar's labels and the built-in event box. */
   text: {
-    /** Large day number in the week/day header. */
+    /** The day number in a time-grid (week/day) column header. */
     dayNumber: TextStyle;
-    /** Short weekday label ("Mon") in headers. */
+    /** The weekday label ("Mon") in a time-grid column header. */
+    columnHeaderWeekday: TextStyle;
+    /** Short weekday label ("Mon") in the month grid's header row. */
     weekday: TextStyle;
     /** The "MMMM yyyy" month title above the month grid. */
     monthTitle: TextStyle;
@@ -48,6 +50,8 @@ export interface CalendarTheme {
     monthEvent: ViewStyle;
     /** Each day's column header in the time grid. */
     columnHeader: ViewStyle;
+    /** The day-number badge (the circle) inside a time-grid column header. */
+    columnHeaderBadge: ViewStyle;
     /** A timed event's positioned box in the time grid (and resource timeline). */
     timeGridEvent: ViewStyle;
     /** The current-time indicator line. */
@@ -78,7 +82,11 @@ export interface CalendarTheme {
 export const defaultTheme: CalendarTheme = {
   colors: lightColors,
   text: {
-    dayNumber: { fontSize: 22, fontWeight: "700" },
+    // Match the header's shipped look: these two previously lived as hardcoded
+    // styles in the time-grid header, so honouring the theme changes nothing
+    // until a consumer overrides them.
+    dayNumber: { fontSize: 15, fontWeight: "600" },
+    columnHeaderWeekday: { fontSize: 11, fontWeight: "600" },
     weekday: { fontSize: 13, fontWeight: "700" },
     monthTitle: { fontSize: 17, fontWeight: "700" },
     dateCell: { fontSize: 13, fontWeight: "700" },
@@ -96,6 +104,7 @@ export const defaultTheme: CalendarTheme = {
     dayBadge: {},
     monthEvent: {},
     columnHeader: {},
+    columnHeaderBadge: {},
     timeGridEvent: {},
     nowIndicator: {},
     resourceRow: {},