@super-calendar/native 2.1.5 → 2.3.0

package/src/components/TimeGrid.tsx

@@ -63,8 +63,11 @@ import {
   snapDeltaMinutes,
 } from "@super-calendar/core";
 import { formatHour, layoutDayEvents, type PositionedEvent } from "@super-calendar/core";
+import type { EventAccessibilityLabeler } from "@super-calendar/core";
+import { type WeekdayFormat, weekdayFormatToken } from "@super-calendar/core";
 import { useWebGridZoom } from "../utils/useWebGridZoom";
 import { useWebPagerKeys } from "../utils/useWebPagerKeys";
+import { withEventAccessibilityLabel } from "../utils/withEventAccessibilityLabel";
 import { AllDayLane } from "./AllDayLane";
 
 // Horizontal swipe paging doesn't translate to web; there we disable it and page
@@ -370,7 +373,9 @@ function AnimatedEventBox<T>({
     !draggable && onLongPress ? () => onLongPress(positioned.event) : undefined;
 
   const box = (
-    <Animated.View style={[styles.eventBox, { left, width }, boxStyle]}>
+    <Animated.View
+      style={[styles.eventBox, { left, width }, boxStyle, theme.containers.timeGridEvent]}
+    >
       <RenderEventComponent
         event={positioned.event}
         mode={mode}
@@ -493,6 +498,7 @@ type NowIndicatorProps = {
 };
 
 const NowIndicator = ({ cellHeight, nowHours, minHour, left, width, color }: NowIndicatorProps) => {
+  const theme = useCalendarTheme();
   const animatedStyle = useAnimatedStyle(
     () => ({ top: (nowHours - minHour) * cellHeight.value }),
     [nowHours, minHour],
@@ -505,6 +511,7 @@ const NowIndicator = ({ cellHeight, nowHours, minHour, left, width, color }: Now
         styles.nonInteractive,
         { left, width, backgroundColor: color },
         animatedStyle,
+        theme.containers.nowIndicator,
       ]}
     />
   );
@@ -1179,7 +1186,15 @@ export type TimeGridProps<T> = {
   /** Initial per-hour row height in px; seeds scroll/zoom without reading the shared value during render. */
   hourHeight?: number;
   weekStartsOn: WeekStartsOn;
+  /** Column-header weekday label width: `narrow` ("M"), `short` ("Mon", default), or `long` ("Monday"). */
+  weekdayFormat?: WeekdayFormat;
   renderEvent: RenderEvent<T>;
+  /**
+   * Override the screen-reader label for each event. Receives the event and a
+   * `{ mode, isAllDay, ampm }` context; return the full text to announce. Defaults
+   * to the built-in title-and-time label.
+   */
+  eventAccessibilityLabel?: EventAccessibilityLabeler<T>;
   keyExtractor: EventKeyExtractor<T>;
   scrollOffsetMinutes?: number;
   hourColumnWidth?: number;
@@ -1258,7 +1273,9 @@ function TimeGridInner<T>({
   cellHeight,
   hourHeight = DEFAULT_HOUR_HEIGHT,
   weekStartsOn,
+  weekdayFormat = "short",
   renderEvent,
+  eventAccessibilityLabel,
   keyExtractor,
   scrollOffsetMinutes = 0,
   hourColumnWidth: hourColumnWidthProp = DEFAULT_HOUR_COLUMN_WIDTH,
@@ -1304,6 +1321,14 @@ function TimeGridInner<T>({
   // Collapse the hour gutter to zero when hours are hidden.
   const hourColumnWidth = hideHours ? 0 : hourColumnWidthProp;
 
+  // Inject a consumer's `eventAccessibilityLabel` override into every event once,
+  // so the timed columns and the all-day lane share it without threading a prop
+  // through each. Passes the grid's `ampm` so the label can match the clock.
+  const labeledRenderEvent = useMemo(
+    () => withEventAccessibilityLabel(renderEvent, eventAccessibilityLabel, ampm),
+    [renderEvent, eventAccessibilityLabel, ampm],
+  );
+
   const { width, height } = useWindowDimensions();
   const listRef = useRef<LegendListRef>(null);
   // The grid's outer view; on web its ref resolves to the DOM node we attach the
@@ -1590,7 +1615,7 @@ function TimeGridInner<T>({
           minHourHeight={minHourHeight}
           maxHourHeight={maxHourHeight}
           showNowIndicator={showNowIndicator}
-          renderEvent={renderEvent}
+          renderEvent={labeledRenderEvent}
           keyExtractor={keyExtractor}
           snapMinutes={Math.max(1, dragStepMinutes)}
           showDragHandle={showDragHandle}
@@ -1634,7 +1659,7 @@ function TimeGridInner<T>({
       minHourHeight,
       maxHourHeight,
       showNowIndicator,
-      renderEvent,
+      labeledRenderEvent,
       keyExtractor,
       dragStepMinutes,
       showDragHandle,
@@ -1667,6 +1692,7 @@ function TimeGridInner<T>({
           hourColumnWidth={hourColumnWidth}
           showWeekNumber={showWeekNumber}
           weekNumberPrefix={weekNumberPrefix}
+          weekdayFormat={weekdayFormat}
           locale={locale}
           activeDate={activeDate}
           onPressDateHeader={onPressDateHeader}
@@ -1747,6 +1773,7 @@ type DefaultHeaderProps = {
   hourColumnWidth: number;
   showWeekNumber?: boolean;
   weekNumberPrefix?: string;
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale;
   activeDate?: Date;
   onPressDateHeader?: (date: Date) => void;
@@ -1759,6 +1786,7 @@ const DefaultHeader = ({
   hourColumnWidth,
   showWeekNumber,
   weekNumberPrefix = "W",
+  weekdayFormat,
   locale,
   activeDate,
   onPressDateHeader,
@@ -1785,6 +1813,7 @@ const DefaultHeader = ({
           day={day}
           mode={mode}
           width={dayWidth}
+          weekdayFormat={weekdayFormat}
           locale={locale}
           activeDate={activeDate}
           onPressDateHeader={onPressDateHeader}
@@ -1798,12 +1827,20 @@ type DayHeaderProps = {
   day: Date;
   mode: CalendarMode;
   width: number;
+  weekdayFormat?: WeekdayFormat;
   locale?: Locale;
   activeDate?: Date;
   onPressDateHeader?: (date: Date) => void;
 };
 
-const DayHeader = ({ day, width, locale, activeDate, onPressDateHeader }: DayHeaderProps) => {
+const DayHeader = ({
+  day,
+  width,
+  weekdayFormat = "short",
+  locale,
+  activeDate,
+  onPressDateHeader,
+}: DayHeaderProps) => {
   const theme = useCalendarTheme();
   const isToday = getIsToday(day);
   // Highlight the chosen `activeDate` when supplied, else the real today.
@@ -1811,28 +1848,36 @@ const DayHeader = ({ day, width, locale, activeDate, onPressDateHeader }: DayHea
 
   return (
     <Pressable
-      style={[styles.dayHeader, { width }]}
+      style={[styles.dayHeader, { width }, theme.containers.columnHeader]}
       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, "EEE", { locale })}
+        {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}
@@ -1872,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,
@@ -1884,10 +1925,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  dayHeaderNumber: {
-    fontSize: 15,
-    fontWeight: "600",
-  },
   content: {
     width: "100%",
     position: "relative",

package/src/index.tsx

@@ -35,6 +35,12 @@ export {
 } from "./components/TimeGrid";
 export { DefaultEvent } from "./components/DefaultEvent";
 export { DefaultMonthEvent } from "./components/DefaultMonthEvent";
+export {
+  ResourceTimeline,
+  type ResourceTimelineProps,
+  type Resource,
+  type ResourceEventArgs,
+} from "./components/ResourceTimeline";
 export {
   type CalendarTheme,
   type PartialCalendarTheme,
@@ -48,6 +54,8 @@ export type {
   BusinessHours,
   CalendarEvent,
   CalendarMode,
+  EventAccessibilityLabelContext,
+  EventAccessibilityLabeler,
   EventKeyExtractor,
   ICalendarEvent,
   RecurrenceFrequency,
@@ -55,6 +63,7 @@ export type {
   RenderEvent,
   RenderEventArgs,
   TimeGridMode,
+  WeekdayFormat,
   WeekStartsOn,
 } from "./types";
 export {
@@ -77,6 +86,7 @@ export {
   type MonthGridWeekday,
   type UseMonthGridOptions,
   useMonthGrid,
+  weekdayFormatToken,
 } from "@super-calendar/core";
 export { expandRecurringEvents } from "@super-calendar/core";
 export { eventsInTimeZone, toZonedTime } from "@super-calendar/core";

package/src/theme.ts

@@ -1,6 +1,6 @@
 import { type CalendarColors, darkColors, lightColors } from "@super-calendar/core";
 import { type Context, createContext, useContext } from "react";
-import type { TextStyle } from "react-native";
+import type { TextStyle, ViewStyle } from "react-native";
 
 /**
  * The full set of colours, text styles and metrics the calendar paints with.
@@ -12,10 +12,14 @@ 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;
     /** Date number inside a month cell. */
     dateCell: TextStyle;
     /** Hour labels down the left of the time grid. */
@@ -25,6 +29,46 @@ export interface CalendarTheme {
     /** 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;
+    /** 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. */
+    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;
   /**
@@ -38,8 +82,13 @@ 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" },
     hourLabel: { fontSize: 10 },
     more: { fontSize: 11, fontWeight: "700" },
@@ -47,6 +96,24 @@ export const defaultTheme: CalendarTheme = {
     // whole number of lines (clipping on a line boundary, never mid-line).
     eventTitle: { fontSize: 12, fontWeight: "700", lineHeight: 16 },
   },
+  containers: {
+    monthContainer: {},
+    weekdayHeader: {},
+    weekRow: {},
+    dayCell: {},
+    dayBadge: {},
+    monthEvent: {},
+    columnHeader: {},
+    columnHeaderBadge: {},
+    timeGridEvent: {},
+    nowIndicator: {},
+    resourceRow: {},
+    resourceLabel: {},
+    agendaList: {},
+    agendaRow: {},
+    allDayLane: {},
+    allDayColumn: {},
+  },
   todayBadgeRadius: 999,
   rangeBandHeight: 22,
 };
@@ -59,6 +126,7 @@ export const defaultTheme: CalendarTheme = {
 export const darkTheme: CalendarTheme = {
   colors: darkColors,
   text: defaultTheme.text,
+  containers: defaultTheme.containers,
   todayBadgeRadius: defaultTheme.todayBadgeRadius,
   rangeBandHeight: defaultTheme.rangeBandHeight,
 };
@@ -69,6 +137,7 @@ export function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme {
   return {
     colors: { ...defaultTheme.colors, ...theme.colors },
     text: { ...defaultTheme.text, ...theme.text },
+    containers: { ...defaultTheme.containers, ...theme.containers },
     todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius,
     rangeBandHeight: theme.rangeBandHeight ?? defaultTheme.rangeBandHeight,
   };
@@ -82,6 +151,7 @@ export function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme {
 export type PartialCalendarTheme = {
   colors?: Partial<CalendarTheme["colors"]>;
   text?: Partial<CalendarTheme["text"]>;
+  containers?: Partial<CalendarTheme["containers"]>;
   todayBadgeRadius?: number;
   rangeBandHeight?: number;
 };

package/src/types.ts

@@ -9,11 +9,14 @@ export type {
   BusinessHours,
   CalendarEvent,
   CalendarMode,
+  EventAccessibilityLabelContext,
+  EventAccessibilityLabeler,
   EventKeyExtractor,
   ICalendarEvent,
   RecurrenceFrequency,
   RecurrenceRule,
   TimeGridMode,
+  WeekdayFormat,
   WeekStartsOn,
 } from "@super-calendar/core";
 
@@ -53,6 +56,12 @@ export type RenderEventArgs<T = unknown> = {
   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;

package/src/utils/withEventAccessibilityLabel.tsx

@@ -0,0 +1,30 @@
+import type { EventAccessibilityLabeler } from "@super-calendar/core";
+import type { RenderEvent, RenderEventArgs } from "../types";
+
+/**
+ * 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.
+ */
+export function withEventAccessibilityLabel<T>(
+  renderEvent: RenderEvent<T>,
+  labeler: EventAccessibilityLabeler<T> | undefined,
+  ampm: boolean,
+): RenderEvent<T> {
+  if (!labeler) return renderEvent;
+  const Base = renderEvent;
+  return function LabeledEvent(props: RenderEventArgs<T>) {
+    return (
+      <Base
+        {...props}
+        accessibilityLabel={labeler(props.event, {
+          mode: props.mode,
+          isAllDay: props.isAllDay ?? false,
+          ampm,
+        })}
+      />
+    );
+  };
+}