react-native-bigger-calendar 0.1.0 → 0.2.0

package/src/index.tsx

@@ -1,7 +1,13 @@
 export { Calendar, type CalendarProps } from './components/Calendar';
+export { Agenda, type AgendaProps } from './components/Agenda';
 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 {
+  TimeGrid,
+  type TimeGridProps,
+  type HourRenderer,
+  DEFAULT_HOUR_HEIGHT,
+} from './components/TimeGrid';
 export { DefaultEvent } from './components/DefaultEvent';
 export {
   type CalendarTheme,
@@ -18,6 +24,7 @@ export type {
   ICalendarEvent,
   RenderEvent,
   RenderEventArgs,
+  TimeGridMode,
   WeekStartsOn,
 } from './types';
 export {
@@ -27,4 +34,4 @@ export {
   isSameCalendarDay,
   minutesIntoDay,
 } from './utils/dates';
-export { layoutDayEvents, type PositionedEvent } from './utils/layout';
+export { layoutDayEvents, isAllDayEvent, type PositionedEvent } from './utils/layout';

package/src/types.ts

@@ -1,7 +1,11 @@
 import type { ComponentType } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 
-export type CalendarMode = 'day' | 'week' | 'month';
+export type CalendarMode = 'day' | '3days' | 'week' | 'custom' | 'month' | 'schedule';
+
+/** The time-grid modes (day-column views, excluding month and schedule). */
+export type TimeGridMode = Exclude<CalendarMode, 'month' | 'schedule'>;
 
 /**
  * The minimal shape every calendar event must have. Layout (positioning,
@@ -13,6 +17,14 @@ export interface ICalendarEvent {
   start: Date;
   end: Date;
   title?: string;
+  /**
+   * Force this event into the all-day lane (above the time grid) instead of the
+   * timed columns. When omitted, an event is treated as all-day only if it spans
+   * whole days (both `start` and `end` land on midnight).
+   */
+  allDay?: boolean;
+  /** Ignore taps/long-presses on this event (the built-in renderer also dims it). */
+  disabled?: boolean;
 }
 
 /**
@@ -38,7 +50,17 @@ export type RenderEventArgs<T = unknown> = {
    */
   continuesBefore?: boolean;
   continuesAfter?: boolean;
+  /** True when this event is rendered in the all-day lane (week/day) or is an all-day event in month view. */
+  isAllDay?: boolean;
+  /** Format the built-in renderer's time range in 12-hour AM/PM. Default false (24h). */
+  ampm?: boolean;
+  /** Show the time range in the built-in renderer (day/week/schedule). Default true. */
+  showTime?: boolean;
+  /** Per-event style resolved from `eventCellStyle`; the built-in renderer merges it onto the box. */
+  cellStyle?: StyleProp<ViewStyle>;
   onPress: () => void;
+  /** Wired when the consumer passes `onLongPressEvent`; otherwise undefined. */
+  onLongPress?: () => void;
 };
 
 /**

package/src/utils/dates.ts

@@ -1,5 +1,5 @@
-import { addDays, getHours, getMinutes, isSameDay, isToday, startOfWeek } from 'date-fns';
-import type { WeekStartsOn } from '../types';
+import { addDays, getHours, getMinutes, isSameDay, isToday, startOfDay, startOfWeek } from 'date-fns';
+import type { CalendarMode, WeekStartsOn } from '../types';
 
 /** The seven dates of the week containing `date`, starting on `weekStartsOn`. */
 export const getWeekDays = (date: Date, weekStartsOn: WeekStartsOn): Date[] => {
@@ -7,6 +7,71 @@ export const getWeekDays = (date: Date, weekStartsOn: WeekStartsOn): Date[] => {
   return Array.from({ length: 7 }, (_, index) => addDays(start, index));
 };
 
+/** How many day columns a time-grid mode shows. `custom` uses `numberOfDays`. */
+export const viewDayCount = (mode: CalendarMode, numberOfDays = 1): number => {
+  switch (mode) {
+    case 'week':
+      return 7;
+    case '3days':
+      return 3;
+    case 'custom':
+      return Math.max(1, Math.floor(numberOfDays));
+    default:
+      return 1; // 'day'
+  }
+};
+
+/**
+ * Days in the inclusive span from `weekStartsOn` to `weekEndsOn` (1–7),
+ * wrapping when the end precedes the start (e.g. Sat→Wed). Mirrors
+ * react-native-big-calendar's `weekDaysCount`.
+ */
+export const weekDaysCount = (weekStartsOn: WeekStartsOn, weekEndsOn: WeekStartsOn): number => {
+  if (weekEndsOn < weekStartsOn) {
+    let count = 1;
+    let i = weekStartsOn;
+    while (i !== weekEndsOn && count <= 7) {
+      i = (i + 1) % 7;
+      count++;
+    }
+    return count;
+  }
+  if (weekEndsOn > weekStartsOn) return weekEndsOn - weekStartsOn + 1;
+  return 1;
+};
+
+/**
+ * The day columns to render for a time-grid page. `week` spans the calendar week
+ * (honouring `weekStartsOn`). `custom` with a `weekEndsOn` spans the partial week
+ * from `weekStartsOn` to `weekEndsOn` (anchored to `date`'s week, paging by week);
+ * otherwise every mode shows `viewDayCount` consecutive days starting at `date`.
+ */
+export const getViewDays = (
+  mode: CalendarMode,
+  date: Date,
+  weekStartsOn: WeekStartsOn,
+  numberOfDays = 1,
+  isRTL = false,
+  weekEndsOn?: WeekStartsOn,
+): Date[] => {
+  let days: Date[];
+  if (mode === 'week') {
+    days = getWeekDays(date, weekStartsOn);
+  } else if (mode === 'custom' && weekEndsOn != null) {
+    // Mirror big-calendar: anchor to `date`'s week and take the partial-week span.
+    const subject = startOfDay(date);
+    const offset = weekStartsOn - subject.getDay();
+    days = Array.from({ length: weekDaysCount(weekStartsOn, weekEndsOn) }, (_, index) =>
+      addDays(subject, index + offset),
+    );
+  } else {
+    days = Array.from({ length: viewDayCount(mode, numberOfDays) }, (_, index) =>
+      addDays(startOfDay(date), index),
+    );
+  }
+  return isRTL ? days.reverse() : days;
+};
+
 export const isWeekend = (date: Date): boolean => {
   const day = date.getDay();
   return day === 0 || day === 6;

package/src/utils/layout.ts

@@ -43,6 +43,8 @@ export function layoutDayEvents<T>(
   const nextDayStart = addDays(dayStart, 1);
 
   const segments: Segment<T>[] = events
+    // All-day events live in the lane, not the timed columns.
+    .filter((event) => !isAllDayEvent(event))
     // 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) => {
@@ -99,6 +101,22 @@ export function layoutDayEvents<T>(
   return positioned;
 }
 
+const atMidnight = (date: Date): boolean =>
+  date.getHours() === 0 &&
+  date.getMinutes() === 0 &&
+  date.getSeconds() === 0 &&
+  date.getMilliseconds() === 0;
+
+/**
+ * Whether an event belongs in the all-day lane. An explicit `allDay` flag wins;
+ * otherwise it's inferred when the event spans whole days (both `start` and
+ * `end` land on midnight, e.g. an iCal-style all-day event). Pure.
+ */
+export function isAllDayEvent<T>(event: CalendarEvent<T>): boolean {
+  if (typeof event.allDay === 'boolean') return event.allDay;
+  return event.end > event.start && atMidnight(event.start) && atMidnight(event.end);
+}
+
 /**
  * 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