react-native-bigger-calendar 0.1.0

package/src/index.tsx

@@ -0,0 +1,30 @@
+export { Calendar, type CalendarProps } from './components/Calendar';
+export { MonthView, type MonthViewProps } from './components/MonthView';
+export { MonthPager, type MonthPagerProps } from './components/MonthPager';
+export { TimeGrid, type TimeGridProps, DEFAULT_HOUR_HEIGHT } from './components/TimeGrid';
+export { DefaultEvent } from './components/DefaultEvent';
+export {
+  type CalendarTheme,
+  type PartialCalendarTheme,
+  defaultTheme,
+  mergeTheme,
+  CalendarThemeProvider,
+  useCalendarTheme,
+} from './theme';
+export type {
+  CalendarEvent,
+  CalendarMode,
+  EventKeyExtractor,
+  ICalendarEvent,
+  RenderEvent,
+  RenderEventArgs,
+  WeekStartsOn,
+} from './types';
+export {
+  getWeekDays,
+  getIsToday,
+  isWeekend,
+  isSameCalendarDay,
+  minutesIntoDay,
+} from './utils/dates';
+export { layoutDayEvents, type PositionedEvent } from './utils/layout';

package/src/theme.ts

@@ -0,0 +1,94 @@
+import { createContext, useContext } from 'react';
+import type { TextStyle } from 'react-native';
+
+/**
+ * The full set of colours, text styles and metrics the calendar paints with.
+ * Supply a `Partial<CalendarTheme>` to `<Calendar theme={...} />`; missing keys
+ * fall back to {@link defaultTheme}, so you only override what you care about.
+ */
+export interface CalendarTheme {
+  colors: {
+    /** Hour lines, day separators and month-cell borders. */
+    gridLine: string;
+    /** Background tint behind weekend columns/cells. */
+    weekendBackground: string;
+    /** Fill of the "today" badge (and any today highlight). */
+    todayBackground: string;
+    /** Text on top of the today badge. */
+    todayText: string;
+    /** The current-time indicator line on the week/day grid. */
+    nowIndicator: string;
+    /** Default text colour (day numbers, weekday labels). */
+    text: string;
+    /** Muted text (hour labels, "+N more"). */
+    textMuted: string;
+    /** Dimmed text for days outside the current month. */
+    textDisabled: string;
+    /** Background of the built-in default event box. */
+    eventBackground: string;
+    /** Text colour inside the built-in default event box. */
+    eventText: string;
+  };
+  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. */
+    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;
+  };
+  /** Corner radius of the today badge. Use a large value for a circle. */
+  todayBadgeRadius: number;
+}
+
+export const defaultTheme: CalendarTheme = {
+  colors: {
+    gridLine: '#E2E4E9',
+    weekendBackground: '#F6F7F9',
+    todayBackground: '#1F6FEB',
+    todayText: '#FFFFFF',
+    nowIndicator: '#E5484D',
+    text: '#1A1B1E',
+    textMuted: '#6B7280',
+    textDisabled: '#B5B9C0',
+    eventBackground: '#DCE7FF',
+    eventText: '#1A1B1E',
+  },
+  text: {
+    dayNumber: { fontSize: 22, fontWeight: '700' },
+    weekday: { fontSize: 13, fontWeight: '700' },
+    dateCell: { fontSize: 13, fontWeight: '700' },
+    hourLabel: { fontSize: 12 },
+    more: { fontSize: 11, fontWeight: '700' },
+    eventTitle: { fontSize: 12, fontWeight: '700' },
+  },
+  todayBadgeRadius: 999,
+};
+
+/** Deep-merge a partial theme over {@link defaultTheme}. */
+export function mergeTheme(theme?: PartialCalendarTheme): CalendarTheme {
+  if (!theme) return defaultTheme;
+  return {
+    colors: { ...defaultTheme.colors, ...theme.colors },
+    text: { ...defaultTheme.text, ...theme.text },
+    todayBadgeRadius: theme.todayBadgeRadius ?? defaultTheme.todayBadgeRadius,
+  };
+}
+
+export type PartialCalendarTheme = {
+  colors?: Partial<CalendarTheme['colors']>;
+  text?: Partial<CalendarTheme['text']>;
+  todayBadgeRadius?: number;
+};
+
+const CalendarThemeContext = createContext<CalendarTheme>(defaultTheme);
+
+export const CalendarThemeProvider = CalendarThemeContext.Provider;
+
+export const useCalendarTheme = () => useContext(CalendarThemeContext);

package/src/types.ts

@@ -0,0 +1,56 @@
+import type { ComponentType } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+export type CalendarMode = 'day' | 'week' | 'month';
+
+/**
+ * The minimal shape every calendar event must have. Layout (positioning,
+ * overlap resolution, paging) only ever reads `start`/`end`; `title` is used by
+ * the built-in default renderer. Anything else lives in your own type and is
+ * threaded through untouched via the `T` generic.
+ */
+export interface ICalendarEvent {
+  start: Date;
+  end: Date;
+  title?: string;
+}
+
+/**
+ * An event carrying arbitrary extra fields `T` alongside the required shape.
+ * `ICalendarEvent` is authoritative: keys it reserves (`start`/`end`/`title`)
+ * cannot be re-typed by `T`.
+ */
+export type CalendarEvent<T = unknown> = ICalendarEvent & Omit<T, keyof ICalendarEvent>;
+
+export type RenderEventArgs<T = unknown> = {
+  event: CalendarEvent<T>;
+  mode: CalendarMode;
+  /**
+   * Live pixel height of the event box on the week/day grid, driven on the UI
+   * thread by pinch-to-zoom. Use it to reveal detail progressively as the box
+   * grows. `undefined` in month mode, where events render at a fixed size.
+   */
+  boxHeight?: SharedValue<number>;
+  /**
+   * On the week/day grid, true when this is a clipped segment of a multi-day
+   * event that started on an earlier day / continues onto a later day. Lets a
+   * renderer draw "continues" affordances. `undefined` in month mode.
+   */
+  continuesBefore?: boolean;
+  continuesAfter?: boolean;
+  onPress: () => void;
+};
+
+/**
+ * A component that renders a single event. It is rendered as a real component
+ * (not called as a function), so it may safely use hooks — including Reanimated
+ * hooks driven by `boxHeight`. Render an element that fills its container
+ * (`flex: 1`); the calendar positions and sizes the wrapping box for you.
+ */
+export type RenderEvent<T = unknown> = ComponentType<RenderEventArgs<T>>;
+
+/** Build a stable key for an event. Defaults to start-time + index. */
+export type EventKeyExtractor<T = unknown> = (event: CalendarEvent<T>, index: number) => string;
+
+/** Sunday = 0 … Saturday = 6, matching `Date.prototype.getDay()`. */
+export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/src/utils/dates.ts

@@ -0,0 +1,20 @@
+import { addDays, getHours, getMinutes, isSameDay, isToday, startOfWeek } from 'date-fns';
+import type { WeekStartsOn } from '../types';
+
+/** The seven dates of the week containing `date`, starting on `weekStartsOn`. */
+export const getWeekDays = (date: Date, weekStartsOn: WeekStartsOn): Date[] => {
+  const start = startOfWeek(date, { weekStartsOn });
+  return Array.from({ length: 7 }, (_, index) => addDays(start, index));
+};
+
+export const isWeekend = (date: Date): boolean => {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+};
+
+export const getIsToday = (date: Date): boolean => isToday(date);
+
+export const isSameCalendarDay = (a: Date, b: Date): boolean => isSameDay(a, b);
+
+/** Minutes elapsed since midnight (0–1439). */
+export const minutesIntoDay = (date: Date): number => getHours(date) * 60 + getMinutes(date);

package/src/utils/layout.ts

@@ -0,0 +1,119 @@
+import { addDays, differenceInMinutes, max as maxDate, min as minDate, startOfDay } from 'date-fns';
+import type { CalendarEvent } from '../types';
+
+const MINUTES_PER_HOUR = 60;
+// Minimum duration (in hours) a positioned event is given, so a zero/negative
+// span still occupies a sliver rather than collapsing to nothing.
+const MIN_DURATION_HOURS = 0.25;
+
+export type PositionedEvent<T> = {
+  event: CalendarEvent<T>;
+  /** Hours from midnight to the event's segment start on this day (fractional). */
+  startHours: number;
+  /** Segment duration in hours on this day (clamped to a small minimum). */
+  durationHours: number;
+  /** Zero-based column index within its overlap cluster. */
+  column: number;
+  /** Total columns in this event's overlap cluster. */
+  columns: number;
+  /** True when the segment is clipped because the event continues before/after this day. */
+  continuesBefore: boolean;
+  continuesAfter: boolean;
+};
+
+type Segment<T> = {
+  event: CalendarEvent<T>;
+  start: number;
+  end: number;
+  continuesBefore: boolean;
+  continuesAfter: boolean;
+};
+
+/**
+ * Lay out a single day's events: events that overlap in time are split into
+ * side-by-side columns. Multi-day events are clipped to the portion that falls
+ * on `day` (e.g. a 23:00→01:00 event renders 23:00–24:00 on the start day and
+ * 00:00–01:00 on the next). Pure — safe to call per render, never per frame.
+ */
+export function layoutDayEvents<T>(
+  events: CalendarEvent<T>[],
+  day: Date,
+): PositionedEvent<T>[] {
+  const dayStart = startOfDay(day);
+  const nextDayStart = addDays(dayStart, 1);
+
+  const segments: Segment<T>[] = events
+    // Overlaps this day if it starts before the day ends and ends after it begins.
+    .filter((event) => event.start < nextDayStart && event.end > dayStart)
+    .map((event) => {
+      const segStart = maxDate([event.start, dayStart]);
+      const segEnd = minDate([event.end, nextDayStart]);
+      return {
+        event,
+        start: differenceInMinutes(segStart, dayStart) / MINUTES_PER_HOUR,
+        end: differenceInMinutes(segEnd, dayStart) / MINUTES_PER_HOUR,
+        continuesBefore: event.start < dayStart,
+        continuesAfter: event.end > nextDayStart,
+      };
+    })
+    .sort((a, b) => a.start - b.start);
+
+  const positioned: PositionedEvent<T>[] = [];
+  let cluster: Segment<T>[] = [];
+  let clusterEnd = Number.NEGATIVE_INFINITY;
+
+  const flushCluster = () => {
+    const columnEnds: number[] = [];
+    const columnOf = new Map<Segment<T>, number>();
+    for (const seg of cluster) {
+      let column = columnEnds.findIndex((end) => end <= seg.start);
+      if (column === -1) {
+        column = columnEnds.length;
+        columnEnds.push(seg.end);
+      } else {
+        columnEnds[column] = seg.end;
+      }
+      columnOf.set(seg, column);
+    }
+    for (const seg of cluster) {
+      positioned.push({
+        event: seg.event,
+        startHours: seg.start,
+        durationHours: Math.max(seg.end - seg.start, MIN_DURATION_HOURS),
+        column: columnOf.get(seg) ?? 0,
+        columns: columnEnds.length,
+        continuesBefore: seg.continuesBefore,
+        continuesAfter: seg.continuesAfter,
+      });
+    }
+    cluster = [];
+  };
+
+  for (const seg of segments) {
+    if (cluster.length > 0 && seg.start >= clusterEnd) flushCluster();
+    cluster.push(seg);
+    clusterEnd = Math.max(clusterEnd, seg.end);
+  }
+  if (cluster.length > 0) flushCluster();
+
+  return positioned;
+}
+
+/**
+ * The `startOfDay` ISO keys of every calendar day an event touches (inclusive).
+ * An event ending exactly at midnight does not count the following day. Used to
+ * index events by day for the month grid. Pure.
+ */
+export function eventDayKeys<T>(event: CalendarEvent<T>): string[] {
+  const first = startOfDay(event.start);
+  // The last instant the event occupies; an end of exactly midnight belongs to
+  // the previous day.
+  const lastInstant = event.end > event.start ? new Date(event.end.getTime() - 1) : event.start;
+  const last = startOfDay(lastInstant);
+
+  const keys: string[] = [];
+  for (let cursor = first; cursor <= last; cursor = addDays(cursor, 1)) {
+    keys.push(cursor.toISOString());
+  }
+  return keys;
+}