react-native-ll-calendar 0.3.0 → 0.5.0

package/src/calendar/month-calendar/view/MonthCalendarViewItem.tsx

@@ -21,15 +21,18 @@ import { useEvents } from '../logic/useEvents';
 import { CELL_BORDER_WIDTH } from '../../../constants/size';
 import { RefreshControl } from 'react-native';
 import { useCallback, useMemo, useState } from 'react';
+import { MonthCalendarWeekDayRow } from './MonthCalendarWeekDayRow';
 
 export const MonthCalendarViewItem = (props: {
   month: string;
   weekStartsOn: WeekStartsOn;
   events: CalendarEvent[];
   onPressEvent?: (event: CalendarEvent) => void;
+  onLongPressEvent?: (event: CalendarEvent) => void;
+  delayLongPressEvent?: number;
   onPressCell?: (date: Date) => void;
   onLongPressCell?: (date: Date) => void;
-  delayLongPress?: number;
+  delayLongPressCell?: number;
   flatListIndex: number;
   onRefresh?: () => void;
   refreshing?: boolean;
@@ -41,33 +44,17 @@ export const MonthCalendarViewItem = (props: {
   todayCellTextStyle?: TextStyle;
   hiddenMonth?: boolean;
   monthFormat?: string;
+  stickyHeaderEnabled?: boolean;
 }) => {
-  const {
-    month,
-    weekStartsOn,
-    events,
-    onPressEvent,
-    onPressCell,
-    onLongPressCell,
-    delayLongPress,
-    flatListIndex,
-    onRefresh,
-    refreshing,
-    dayCellContainerStyle,
-    dayCellTextStyle,
-    locale,
-    weekdayCellContainerStyle,
-    weekdayCellTextStyle,
-    todayCellTextStyle,
-    hiddenMonth,
-    monthFormat = 'YYYY/MM',
-  } = props;
   const { width } = useWindowDimensions();
   const eventPosition = new MonthCalendarEventPosition();
-  const date = new Date(month);
+  const date = new Date(props.month);
   const dateDjs = dayjs(date);
-  const startDate = monthlyStartDate({ date, weekStartsOn });
-  const endDate = monthlyEndDate({ date, weekStartsOn });
+  const startDate = monthlyStartDate({
+    date,
+    weekStartsOn: props.weekStartsOn,
+  });
+  const endDate = monthlyEndDate({ date, weekStartsOn: props.weekStartsOn });
   const endDjs = dayjs(endDate);
   const weeks: dayjs.Dayjs[][] = [];
   let currentDate = dayjs(startDate);
@@ -79,7 +66,10 @@ export const MonthCalendarViewItem = (props: {
     currentDate = currentDate.add(7, 'day');
   }
 
-  const { eventsGroupByWeekId } = useEvents({ events, weekStartsOn });
+  const { eventsGroupByWeekId } = useEvents({
+    events: props.events,
+    weekStartsOn: props.weekStartsOn,
+  });
 
   const [bodyHeight, setBodyHeight] = useState(0);
   const onLayoutBody = useCallback((e: LayoutChangeEvent) => {
@@ -100,29 +90,40 @@ export const MonthCalendarViewItem = (props: {
     return (bodyHeight - monthRowHeight - weekdayRowHeight) / weeks.length;
   }, [bodyHeight, monthRowHeight, weekdayRowHeight, weeks.length]);
 
+  const stickyHeaderIndices = useMemo(() => {
+    return props.stickyHeaderEnabled ? [0] : [];
+  }, [props.stickyHeaderEnabled]);
+
   return (
     <ScrollView
-      style={[styles.container, { width, zIndex: flatListIndex }]}
+      style={[styles.container, { width, zIndex: props.flatListIndex }]}
       refreshControl={
-        <RefreshControl refreshing={!!refreshing} onRefresh={onRefresh} />
+        <RefreshControl
+          refreshing={!!props.refreshing}
+          onRefresh={props.onRefresh}
+        />
       }
       onLayout={onLayoutBody}
+      stickyHeaderIndices={stickyHeaderIndices}
     >
-      {hiddenMonth ? (
-        <View style={styles.blankMonthContainer} />
-      ) : (
-        <View style={styles.monthContainer} onLayout={onLayoutMonthRow}>
-          <Text style={styles.monthText}>{dateDjs.format(monthFormat)}</Text>
+      <View>
+        {props.hiddenMonth ? (
+          <View style={styles.blankMonthContainer} />
+        ) : (
+          <View style={styles.monthContainer} onLayout={onLayoutMonthRow}>
+            <Text style={styles.monthText}>
+              {dateDjs.format(props.monthFormat ?? 'YYYY/MM')}
+            </Text>
+          </View>
+        )}
+        <View onLayout={onLayoutWeekdayRow}>
+          <MonthCalendarWeekDayRow
+            dates={weeks[0] ?? []}
+            locale={props.locale}
+            weekdayCellContainerStyle={props.weekdayCellContainerStyle}
+            weekdayCellTextStyle={props.weekdayCellTextStyle}
+          />
         </View>
-      )}
-      <View onLayout={onLayoutWeekdayRow}>
-        <MonthCalendarWeekRow
-          dates={weeks[0] ?? []}
-          isWeekdayHeader={true}
-          locale={locale}
-          weekdayCellContainerStyle={weekdayCellContainerStyle}
-          weekdayCellTextStyle={weekdayCellTextStyle}
-        />
       </View>
       <View>
         {weeks.map((week, index) => {
@@ -138,14 +139,16 @@ export const MonthCalendarViewItem = (props: {
               dates={week}
               events={weekEvents}
               eventPosition={eventPosition}
-              onPressEvent={onPressEvent}
-              onPressCell={onPressCell}
-              onLongPressCell={onLongPressCell}
-              delayLongPress={delayLongPress}
-              dayCellContainerStyle={dayCellContainerStyle}
-              dayCellTextStyle={dayCellTextStyle}
+              onPressEvent={props.onPressEvent}
+              onLongPressEvent={props.onLongPressEvent}
+              delayLongPressEvent={props.delayLongPressEvent}
+              onPressCell={props.onPressCell}
+              onLongPressCell={props.onLongPressCell}
+              delayLongPressCell={props.delayLongPressCell}
+              dayCellContainerStyle={props.dayCellContainerStyle}
+              dayCellTextStyle={props.dayCellTextStyle}
               weekRowMinHeight={weekRowMinHeight}
-              todayCellTextStyle={todayCellTextStyle}
+              todayCellTextStyle={props.todayCellTextStyle}
             />
           );
         })}

package/src/calendar/month-calendar/view/MonthCalendarWeekDayRow.tsx

@@ -0,0 +1,79 @@
+import dayjs from 'dayjs';
+import en from 'dayjs/locale/en';
+import { StyleSheet } from 'react-native';
+import { Text, View, type ViewStyle } from 'react-native';
+import type { WeekdayNum } from '../../../types/month-calendar';
+import { CELL_BORDER_WIDTH } from '../../../constants/size';
+import type { TextStyle } from 'react-native';
+
+export const MonthCalendarWeekDayRow = (props: {
+  locale?: ILocale;
+  dates: dayjs.Dayjs[];
+  weekdayCellContainerStyle?: (weekDayNum: WeekdayNum) => ViewStyle;
+  weekdayCellTextStyle?: (weekDayNum: WeekdayNum) => TextStyle;
+}) => {
+  return (
+    <View style={styles.container}>
+      {props.dates.map((djs, dateIndex) => {
+        const text = djs.locale(props.locale ?? en).format('ddd');
+
+        return (
+          <View
+            key={djs.get('d')}
+            style={[styles.dayCellContainer, { zIndex: 7 - dateIndex }]}
+          >
+            <View
+              style={[
+                styles.dayCellInner,
+                props.weekdayCellContainerStyle?.(djs.day()),
+              ]}
+            />
+            <View style={styles.dayCellLabel}>
+              <Text
+                style={[
+                  styles.dayCellText,
+                  props.weekdayCellTextStyle?.(djs.day()),
+                ]}
+              >
+                {text}
+              </Text>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  dayCellContainer: {
+    flex: 1,
+    borderRightWidth: CELL_BORDER_WIDTH,
+    borderBottomWidth: CELL_BORDER_WIDTH,
+    borderColor: 'lightslategrey',
+    backgroundColor: 'white',
+    position: 'relative',
+  },
+  dayCellInner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  dayCellLabel: {
+    paddingVertical: 1,
+    paddingHorizontal: 2,
+  },
+  dayCellText: {
+    textAlign: 'center',
+    fontSize: 12,
+  },
+});

package/src/calendar/month-calendar/view/MonthCalendarWeekRow.tsx

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-import en from 'dayjs/locale/en';
 import { StyleSheet, useWindowDimensions } from 'react-native';
 import { Text, TouchableOpacity, View, type ViewStyle } from 'react-native';
 import type { CalendarEvent, WeekdayNum } from '../../../types/month-calendar';
@@ -9,76 +8,55 @@ import type { TextStyle } from 'react-native';
 
 export const MonthCalendarWeekRow = (props: {
   dates: dayjs.Dayjs[];
-  isWeekdayHeader?: boolean;
-  events?: CalendarEvent[];
+  events: CalendarEvent[];
   eventPosition?: MonthCalendarEventPosition;
   onPressEvent?: (event: CalendarEvent) => void;
+  onLongPressEvent?: (event: CalendarEvent) => void;
+  delayLongPressEvent?: number;
   onPressCell?: (date: Date) => void;
   onLongPressCell?: (date: Date) => void;
-  delayLongPress?: number;
+  delayLongPressCell?: number;
   dayCellContainerStyle?: (date: Date) => ViewStyle;
   dayCellTextStyle?: (date: Date) => TextStyle;
-  locale?: ILocale;
   weekdayCellContainerStyle?: (weekDayNum: WeekdayNum) => ViewStyle;
   weekdayCellTextStyle?: (weekDayNum: WeekdayNum) => TextStyle;
   weekRowMinHeight?: number;
   todayCellTextStyle?: TextStyle;
 }) => {
-  const {
-    dates,
-    isWeekdayHeader,
-    events = [],
-    eventPosition,
-    onPressEvent,
-    onPressCell,
-    onLongPressCell,
-    delayLongPress = 500,
-    dayCellContainerStyle,
-    dayCellTextStyle,
-    locale = en,
-    weekdayCellContainerStyle,
-    weekdayCellTextStyle,
-    weekRowMinHeight,
-    todayCellTextStyle,
-  } = props;
   const eventHeight = 26;
   const { width: screenWidth } = useWindowDimensions();
   const dateColumnWidth = screenWidth / 7;
-  const weekId = dates[0]?.format('YYYY-MM-DD');
-  if (weekId && eventPosition) {
-    eventPosition.resetResource(weekId);
+  const weekId = props.dates[0]?.format('YYYY-MM-DD');
+  if (weekId && props.eventPosition) {
+    props.eventPosition.resetResource(weekId);
   }
 
   return (
     <View style={styles.container}>
-      {dates.map((djs, dateIndex) => {
-        const text = isWeekdayHeader
-          ? djs.locale(locale).format('ddd')
-          : djs.format('D');
-        const filteredEvents = isWeekdayHeader
-          ? []
-          : events
-              .filter((event) => {
-                const startDjs = dayjs(event.start);
-                return (
-                  startDjs.format('YYYY-MM-DD') === djs.format('YYYY-MM-DD') ||
-                  (dateIndex === 0 && startDjs.isBefore(djs))
-                );
-              })
-              .sort((a, b) => {
-                const aStartDjs = dateIndex === 0 ? djs : dayjs(a.start);
-                const bStartDjs = dateIndex === 0 ? djs : dayjs(b.start);
-                const aEndDjs = dayjs(a.end);
-                const bEndDjs = dayjs(b.end);
-                const aDiffDays = aEndDjs.diff(aStartDjs, 'day');
-                const bDiffDays = bEndDjs.diff(bStartDjs, 'day');
+      {props.dates.map((djs, dateIndex) => {
+        const text = djs.format('D');
+        const filteredEvents = props.events
+          ?.filter((event) => {
+            const startDjs = dayjs(event.start);
+            return (
+              startDjs.format('YYYY-MM-DD') === djs.format('YYYY-MM-DD') ||
+              (dateIndex === 0 && startDjs.isBefore(djs))
+            );
+          })
+          .sort((a, b) => {
+            const aStartDjs = dateIndex === 0 ? djs : dayjs(a.start);
+            const bStartDjs = dateIndex === 0 ? djs : dayjs(b.start);
+            const aEndDjs = dayjs(a.end);
+            const bEndDjs = dayjs(b.end);
+            const aDiffDays = aEndDjs.diff(aStartDjs, 'day');
+            const bDiffDays = bEndDjs.diff(bStartDjs, 'day');
 
-                return bDiffDays - aDiffDays;
-              });
+            return bDiffDays - aDiffDays;
+          });
 
-        const rows: (CalendarEvent | number)[] = [];
-        if (weekId && eventPosition) {
-          const rowNums = eventPosition.getRowNums({
+        const events: (CalendarEvent | number)[] = [];
+        if (weekId && props.eventPosition) {
+          const rowNums = props.eventPosition.getRowNums({
             weekId,
             date: djs.toDate(),
           });
@@ -86,11 +64,11 @@ export const MonthCalendarWeekRow = (props: {
           let eventIndex = 0;
           for (let ii = 1; ii <= rowsLength; ii++) {
             if (rowNums.includes(ii)) {
-              rows.push(ii);
+              events.push(ii);
             } else {
               const event = filteredEvents[eventIndex];
               if (event) {
-                rows.push(event);
+                events.push(event);
               }
               eventIndex++;
             }
@@ -98,56 +76,52 @@ export const MonthCalendarWeekRow = (props: {
         }
         return (
           <TouchableOpacity
-            key={isWeekdayHeader ? djs.get('d') : djs.get('date')}
+            key={djs.get('date')}
             style={[
               styles.dayCellCountainer,
-              { minHeight: isWeekdayHeader ? undefined : weekRowMinHeight },
+              { minHeight: props.weekRowMinHeight },
               { zIndex: 7 - dateIndex },
             ]}
             onPress={() => {
-              onPressCell?.(djs.toDate());
+              props.onPressCell?.(djs.toDate());
             }}
             onLongPress={() => {
-              onLongPressCell?.(djs.toDate());
+              props.onLongPressCell?.(djs.toDate());
             }}
-            delayLongPress={delayLongPress}
+            delayLongPress={props.delayLongPressCell}
           >
             <View
               style={[
                 styles.dayCellInner,
-                isWeekdayHeader
-                  ? weekdayCellContainerStyle?.(djs.day())
-                  : dayCellContainerStyle?.(djs.toDate()),
+                props.dayCellContainerStyle?.(djs.toDate()),
               ]}
             />
             <View style={styles.dayCellLabel}>
               <Text
                 style={[
                   styles.dayCellText,
-                  isWeekdayHeader
-                    ? weekdayCellTextStyle?.(djs.day())
-                    : dayCellTextStyle?.(djs.toDate()),
-                  !isWeekdayHeader && dayjs(djs).isSame(dayjs(), 'day')
-                    ? todayCellTextStyle
+                  props.dayCellTextStyle?.(djs.toDate()),
+                  dayjs(djs).isSame(dayjs(), 'day')
+                    ? props.todayCellTextStyle
                     : {},
                 ]}
               >
                 {text}
               </Text>
             </View>
-            {rows.map((eventRow, rowIndex) => {
-              if (typeof eventRow === 'number') {
+            {events.map((event, rowIndex) => {
+              if (typeof event === 'number') {
                 return (
                   <View
-                    key={eventRow}
+                    key={event}
                     style={{ height: eventHeight, marginBottom: EVENT_GAP }}
                   />
                 );
               }
 
-              const rawStartDjs = dayjs(eventRow.start);
-              const startDjs = dateIndex === 0 ? djs : dayjs(eventRow.start);
-              const endDjs = dayjs(eventRow.end);
+              const rawStartDjs = dayjs(event.start);
+              const startDjs = dateIndex === 0 ? djs : dayjs(event.start);
+              const endDjs = dayjs(event.end);
               const diffDays = endDjs
                 .startOf('day')
                 .diff(startDjs.startOf('day'), 'day');
@@ -162,10 +136,10 @@ export const MonthCalendarWeekRow = (props: {
                 width += EVENT_GAP + 1;
               }
 
-              const isLastRow = rowIndex === rows.length - 1;
+              const isLastRow = rowIndex === events.length - 1;
 
-              if (eventPosition && weekId) {
-                eventPosition.push({
+              if (props.eventPosition && weekId) {
+                props.eventPosition.push({
                   weekId,
                   startDate: startDjs.toDate(),
                   days: diffDays + 1,
@@ -175,28 +149,41 @@ export const MonthCalendarWeekRow = (props: {
 
               return (
                 <TouchableOpacity
-                  key={eventRow.id}
+                  key={event.id}
                   style={[
                     styles.event,
                     {
-                      backgroundColor: eventRow.backgroundColor,
-                      borderColor: eventRow.borderColor,
+                      backgroundColor: event.backgroundColor,
+                      borderColor: event.borderColor,
                       width: width,
                       height: eventHeight,
+                      ...(event.borderStyle !== undefined && {
+                        borderStyle: event.borderStyle,
+                      }),
+                      ...(event.borderWidth !== undefined && {
+                        borderWidth: event.borderWidth,
+                      }),
+                      ...(event.borderRadius !== undefined && {
+                        borderRadius: event.borderRadius,
+                      }),
                     },
                     isPrevDateEvent ? styles.prevDateEvent : {},
                     isLastRow ? styles.lastRowEvent : {},
                   ]}
                   onPress={() => {
-                    onPressEvent?.(eventRow);
+                    props.onPressEvent?.(event);
+                  }}
+                  onLongPress={() => {
+                    props.onLongPressEvent?.(event);
                   }}
+                  delayLongPress={props.delayLongPressEvent}
                 >
                   <Text
                     numberOfLines={1}
                     ellipsizeMode="tail"
-                    style={[styles.eventTitle, { color: eventRow.color }]}
+                    style={[styles.eventTitle, { color: event.color }]}
                   >
-                    {eventRow.title}
+                    {event.title}
                   </Text>
                 </TouchableOpacity>
               );

package/src/types/month-calendar.ts

@@ -8,6 +8,9 @@ export type CalendarEvent = {
   backgroundColor: string;
   borderColor: string;
   color: string;
+  borderStyle?: 'solid' | 'dashed' | 'dotted';
+  borderWidth?: number;
+  borderRadius?: number;
 };
 
 export type WeekdayNum = 0 | 1 | 2 | 3 | 4 | 5 | 6;