react-native-bigger-calendar 0.1.0 → 0.2.0

package/src/components/MonthPager.tsx

@@ -4,10 +4,19 @@ import {
   type LegendListRenderItemProps,
   type OnViewableItemsChangedInfo,
 } from '@legendapp/list/react-native';
-import { addMonths, differenceInCalendarMonths, startOfMonth } from 'date-fns';
+import { addMonths, differenceInCalendarMonths, format, type Locale, startOfMonth } from 'date-fns';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import {
+  StyleSheet,
+  type StyleProp,
+  Text,
+  useWindowDimensions,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useCalendarTheme } from '../theme';
 import type { CalendarEvent, EventKeyExtractor, RenderEvent, WeekStartsOn } from '../types';
+import { getWeekDays } from '../utils/dates';
 import { MonthView } from './MonthView';
 
 // Months rendered either side of the current page. LegendList virtualises, so
@@ -24,13 +33,27 @@ export type MonthPagerProps<T> = {
   events: CalendarEvent<T>[];
   maxVisibleEventCount: number;
   weekStartsOn: WeekStartsOn;
+  locale?: Locale;
+  sortedMonthView?: boolean;
+  moreLabel?: string;
+  showAdjacentMonths?: boolean;
+  disableMonthEventCellPress?: boolean;
+  isRTL?: boolean;
+  calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   renderEvent: RenderEvent<T>;
   keyExtractor: EventKeyExtractor<T>;
   onPressDay?: (date: Date) => void;
+  onLongPressDay?: (date: Date) => void;
   onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
   onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
   onChangeDate: (date: Date) => void;
   freeSwipe?: boolean;
+  swipeEnabled?: boolean;
+  showSixWeeks?: boolean;
+  activeDate?: Date;
+  /** Replace the weekday-label header above the month grid. Receives the week's days. */
+  renderHeaderForMonthView?: (weekDays: Date[]) => React.ReactNode;
 };
 
 function MonthPagerInner<T>({
@@ -38,13 +61,26 @@ function MonthPagerInner<T>({
   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,
 }: MonthPagerProps<T>) {
   const { width, height } = useWindowDimensions();
   const listRef = useRef<LegendListRef>(null);
@@ -91,6 +127,14 @@ function MonthPagerInner<T>({
     listRef.current?.scrollToIndex({ index: activeIndex, animated: false });
   }, [activeIndex]);
 
+  // The seven weekday labels for the header above the grid. Weekday names depend
+  // only on `weekStartsOn`, so any week works; reuse the anchor. Reversed in RTL
+  // to line up with the mirrored day cells.
+  const weekDays = useMemo(() => {
+    const days = getWeekDays(anchor, weekStartsOn);
+    return isRTL ? days.reverse() : days;
+  }, [anchor, weekStartsOn, isRTL]);
+
   const snapToIndices = useMemo(() => monthDates.map((_, index) => index), [monthDates]);
   const keyExtractorList = useCallback((item: Date) => item.toISOString(), []);
   const getFixedItemSize = useCallback(() => width, [width]);
@@ -102,10 +146,21 @@ function MonthPagerInner<T>({
           events={events}
           maxVisibleEventCount={maxVisibleEventCount}
           weekStartsOn={weekStartsOn}
+          locale={locale}
+          sortedMonthView={sortedMonthView}
+          moreLabel={moreLabel}
+          showAdjacentMonths={showAdjacentMonths}
+          disableMonthEventCellPress={disableMonthEventCellPress}
+          isRTL={isRTL}
+          showSixWeeks={showSixWeeks}
+          activeDate={activeDate}
+          calendarCellStyle={calendarCellStyle}
           renderEvent={renderEvent}
           keyExtractor={keyExtractor}
           onPressDay={onPressDay}
+          onLongPressDay={onLongPressDay}
           onPressEvent={onPressEvent}
+          onLongPressEvent={onLongPressEvent}
           onPressMore={onPressMore}
         />
       </View>
@@ -116,50 +171,107 @@ function MonthPagerInner<T>({
       events,
       maxVisibleEventCount,
       weekStartsOn,
+      locale,
+      sortedMonthView,
+      moreLabel,
+      showAdjacentMonths,
+      disableMonthEventCellPress,
+      isRTL,
+      showSixWeeks,
+      activeDate,
+      calendarCellStyle,
       renderEvent,
       keyExtractor,
       onPressDay,
+      onLongPressDay,
       onPressEvent,
+      onLongPressEvent,
       onPressMore,
     ],
   );
 
   return (
-    <View style={styles.pager} onLayout={(event) => setPageHeight(event.nativeEvent.layout.height)}>
-      <LegendList
-        // Remount when the measured page height changes so the list adopts the
-        // corrected item height. Without this the list can keep the oversized
-        // initial (window-height) seed and clip the last week row.
-        key={pageHeight}
-        ref={listRef}
-        style={styles.pagerList}
-        data={monthDates}
-        horizontal
-        recycleItems={false}
-        keyExtractor={keyExtractorList}
-        getFixedItemSize={getFixedItemSize}
-        // Default: native paging — each page is the viewport width, so a swipe
-        // hard-stops at the adjacent month and can't fling past it. With
-        // `freeSwipe`, momentum carries across months and snaps to a boundary.
-        pagingEnabled={!freeSwipe}
-        snapToIndices={freeSwipe ? snapToIndices : undefined}
-        initialScrollIndex={activeIndex}
-        showsHorizontalScrollIndicator={false}
-        viewabilityConfig={PAGE_VIEWABILITY}
-        onViewableItemsChanged={handleViewableItemsChanged}
-        renderItem={renderItem}
-      />
+    <View style={styles.container}>
+      {renderHeaderForMonthView ? (
+        renderHeaderForMonthView(weekDays)
+      ) : (
+        <MonthWeekdayHeader weekDays={weekDays} locale={locale} />
+      )}
+      <View
+        style={styles.pager}
+        onLayout={(event) => setPageHeight(event.nativeEvent.layout.height)}
+      >
+        <LegendList
+          // Remount when the measured page height changes so the list adopts the
+          // corrected item height. Without this the list can keep the oversized
+          // initial (window-height) seed and clip the last week row.
+          key={pageHeight}
+          ref={listRef}
+          style={styles.pagerList}
+          data={monthDates}
+          horizontal
+          recycleItems={false}
+          keyExtractor={keyExtractorList}
+          getFixedItemSize={getFixedItemSize}
+          scrollEnabled={swipeEnabled}
+          // Default: native paging — each page is the viewport width, so a swipe
+          // hard-stops at the adjacent month and can't fling past it. With
+          // `freeSwipe`, momentum carries across months and snaps to a boundary.
+          pagingEnabled={!freeSwipe}
+          snapToIndices={freeSwipe ? snapToIndices : undefined}
+          initialScrollIndex={activeIndex}
+          showsHorizontalScrollIndicator={false}
+          viewabilityConfig={PAGE_VIEWABILITY}
+          onViewableItemsChanged={handleViewableItemsChanged}
+          renderItem={renderItem}
+        />
+      </View>
     </View>
   );
 }
 
 export const MonthPager = memo(MonthPagerInner) as typeof MonthPagerInner;
 
+type MonthWeekdayHeaderProps = {
+  weekDays: Date[];
+  locale?: Locale;
+};
+
+// The default weekday-label row above the month grid (e.g. "Mon Tue Wed…"),
+// one flex column per day to line up with the grid cells below.
+const MonthWeekdayHeader = ({ weekDays, locale }: MonthWeekdayHeaderProps) => {
+  const theme = useCalendarTheme();
+  return (
+    <View style={styles.weekdayHeader}>
+      {weekDays.map((day) => (
+        <Text
+          key={day.toISOString()}
+          style={[theme.text.weekday, styles.weekdayLabel, { color: theme.colors.textMuted }]}
+          allowFontScaling={false}
+        >
+          {format(day, 'EEE', { locale })}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   pager: {
     flex: 1,
   },
   pagerList: {
     flex: 1,
   },
+  weekdayHeader: {
+    flexDirection: 'row',
+    paddingBottom: 4,
+  },
+  weekdayLabel: {
+    flex: 1,
+    textAlign: 'center',
+  },
 });

package/src/components/MonthView.tsx

@@ -1,19 +1,21 @@
 import {
+  addDays,
   eachDayOfInterval,
   endOfMonth,
   endOfWeek,
   format,
+  type Locale,
   isSameMonth,
   startOfDay,
   startOfMonth,
   startOfWeek,
 } from 'date-fns';
 import { memo, useMemo } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, type StyleProp, Text, TouchableOpacity, View, type ViewStyle } from 'react-native';
 import { useCalendarTheme } from '../theme';
 import type { CalendarEvent, EventKeyExtractor, RenderEvent, WeekStartsOn } from '../types';
-import { getIsToday, isWeekend } from '../utils/dates';
-import { eventDayKeys } from '../utils/layout';
+import { getIsToday, isSameCalendarDay, isWeekend } from '../utils/dates';
+import { eventDayKeys, isAllDayEvent } from '../utils/layout';
 
 const chunkIntoWeeks = (days: Date[]): Date[][] => {
   const weeks: Date[][] = [];
@@ -28,10 +30,29 @@ export type MonthViewProps<T> = {
   events: CalendarEvent<T>[];
   maxVisibleEventCount: number;
   weekStartsOn: WeekStartsOn;
+  locale?: Locale;
+  /** Sort each day's events by start time before slicing. Default true. */
+  sortedMonthView?: boolean;
+  /** Template for the overflow label; `{moreCount}` is replaced. Default "{moreCount} More". */
+  moreLabel?: string;
+  /** Show dimmed days from adjacent months in the grid. Default true. */
+  showAdjacentMonths?: boolean;
+  /** Ignore taps on month-cell events (day-cell taps still fire). Default false. */
+  disableMonthEventCellPress?: boolean;
+  /** Reverse the day order within each week (right-to-left). Default false. */
+  isRTL?: boolean;
+  /** Always render six week rows, for a fixed-height grid. Default false. */
+  showSixWeeks?: boolean;
+  /** Highlight this date instead of the real "today". */
+  activeDate?: Date;
+  /** Per-date style merged onto the day cell. */
+  calendarCellStyle?: (date: Date) => StyleProp<ViewStyle>;
   renderEvent: RenderEvent<T>;
   keyExtractor: EventKeyExtractor<T>;
   onPressDay?: (date: Date) => void;
+  onLongPressDay?: (date: Date) => void;
   onPressEvent: (event: CalendarEvent<T>) => void;
+  onLongPressEvent?: (event: CalendarEvent<T>) => void;
   onPressMore?: (events: CalendarEvent<T>[], date: Date) => void;
 };
 
@@ -40,10 +61,21 @@ function MonthViewInner<T>({
   events,
   maxVisibleEventCount,
   weekStartsOn,
+  locale,
+  sortedMonthView = true,
+  moreLabel = '{moreCount} More',
+  showAdjacentMonths = true,
+  disableMonthEventCellPress = false,
+  isRTL = false,
+  showSixWeeks = false,
+  activeDate,
+  calendarCellStyle,
   renderEvent,
   keyExtractor,
   onPressDay,
+  onLongPressDay,
   onPressEvent,
+  onLongPressEvent,
   onPressMore,
 }: MonthViewProps<T>) {
   const theme = useCalendarTheme();
@@ -51,9 +83,13 @@ function MonthViewInner<T>({
 
   const weeks = useMemo(() => {
     const start = startOfWeek(startOfMonth(date), { weekStartsOn });
-    const end = endOfWeek(endOfMonth(date), { weekStartsOn });
-    return chunkIntoWeeks(eachDayOfInterval({ start, end }));
-  }, [date, weekStartsOn]);
+    const naturalEnd = endOfWeek(endOfMonth(date), { weekStartsOn });
+    // Pad to six rows (42 days) for a fixed-height grid; some months span only
+    // four or five weeks.
+    const end = showSixWeeks ? addDays(start, 41) : naturalEnd;
+    const chunked = chunkIntoWeeks(eachDayOfInterval({ start, end }));
+    return isRTL ? chunked.map((week) => [...week].reverse()) : chunked;
+  }, [date, weekStartsOn, isRTL, showSixWeeks]);
 
   // Group events by calendar day once per `events` change, rather than scanning
   // the whole list inside every one of the (up to) 42 day cells on each render.
@@ -67,16 +103,36 @@ function MonthViewInner<T>({
         else map.set(key, [event]);
       }
     }
+    if (sortedMonthView) {
+      for (const list of map.values()) list.sort((a, b) => a.start.getTime() - b.start.getTime());
+    }
     return map;
-  }, [events]);
+  }, [events, sortedMonthView]);
 
   const renderDay = (day: Date) => {
-    const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
     const isCurrentMonth = isSameMonth(day, date);
+
+    // Blank out adjacent-month days when they're hidden, keeping the grid shape.
+    if (!isCurrentMonth && !showAdjacentMonths) {
+      return (
+        <View
+          key={day.toISOString()}
+          style={[
+            styles.dayCell,
+            { borderColor: theme.colors.gridLine },
+            isWeekend(day) && { backgroundColor: theme.colors.weekendBackground },
+          ]}
+        />
+      );
+    }
+
+    const dayEvents = eventsByDay.get(startOfDay(day).toISOString()) ?? [];
     const isToday = getIsToday(day);
+    // Highlight the chosen `activeDate` when supplied, else the real today.
+    const isHighlighted = activeDate ? isSameCalendarDay(day, activeDate) : isToday;
     const hiddenCount = dayEvents.length - maxVisibleEventCount;
 
-    const dateColor = isToday
+    const dateColor = isHighlighted
       ? theme.colors.todayText
       : isCurrentMonth
         ? theme.colors.text
@@ -85,7 +141,7 @@ function MonthViewInner<T>({
     // Summarise the cell for screen readers: full date, today marker, and how
     // many events it holds (the chips inside are grouped under this cell).
     const eventCount = dayEvents.length;
-    const accessibilityLabel = `${format(day, 'EEEE, d LLLL yyyy')}${isToday ? ', today' : ''}, ${eventCount} ${eventCount === 1 ? 'event' : 'events'}`;
+    const accessibilityLabel = `${format(day, 'EEEE, d LLLL yyyy', { locale })}${isToday ? ', today' : ''}, ${eventCount} ${eventCount === 1 ? 'event' : 'events'}`;
 
     return (
       <TouchableOpacity
@@ -94,16 +150,18 @@ function MonthViewInner<T>({
           styles.dayCell,
           { borderColor: theme.colors.gridLine },
           isWeekend(day) && { backgroundColor: theme.colors.weekendBackground },
+          calendarCellStyle?.(day),
         ]}
         onPress={onPressDay ? () => onPressDay(day) : undefined}
-        disabled={!onPressDay}
+        onLongPress={onLongPressDay ? () => onLongPressDay(day) : undefined}
+        disabled={!onPressDay && !onLongPressDay}
         accessibilityRole={onPressDay ? 'button' : undefined}
         accessibilityLabel={accessibilityLabel}
       >
         <View
           style={[
             styles.dateBadge,
-            isToday && {
+            isHighlighted && {
               backgroundColor: theme.colors.todayBackground,
               borderRadius: theme.todayBadgeRadius,
             },
@@ -115,7 +173,17 @@ function MonthViewInner<T>({
         </View>
         {dayEvents.slice(0, maxVisibleEventCount).map((event, index) => (
           <View key={keyExtractor(event, index)} style={styles.monthEvent}>
-            <RenderEventComponent event={event} mode="month" onPress={() => onPressEvent(event)} />
+            <RenderEventComponent
+              event={event}
+              mode="month"
+              isAllDay={isAllDayEvent(event)}
+              onPress={disableMonthEventCellPress ? () => {} : () => onPressEvent(event)}
+              onLongPress={
+                disableMonthEventCellPress || !onLongPressEvent
+                  ? undefined
+                  : () => onLongPressEvent(event)
+              }
+            />
           </View>
         ))}
         {hiddenCount > 0 ? (
@@ -126,7 +194,7 @@ function MonthViewInner<T>({
             accessibilityLabel={`Show ${hiddenCount} more events`}
             allowFontScaling={false}
           >
-            {`${hiddenCount} More`}
+            {moreLabel.replace('{moreCount}', String(hiddenCount))}
           </Text>
         ) : null}
       </TouchableOpacity>