react-native-ll-calendar 0.1.1

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

@@ -0,0 +1,206 @@
+import dayjs from 'dayjs';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
+import type { CalendarEvent } from '../../../types/month-calendar';
+import type MonthCalendarEventPosition from '../../../utils/month-calendar-event-position';
+import { CELL_BORDER_WIDTH, EVENT_GAP } from '../../../constants/size';
+
+export const MonthCalendarWeekRow = (props: {
+  dates: dayjs.Dayjs[];
+  isWeekdayHeader?: boolean;
+  events?: CalendarEvent[];
+  eventPosition?: MonthCalendarEventPosition;
+  onPressEvent?: (event: CalendarEvent) => void;
+  onPressCell?: (date: Date) => void;
+}) => {
+  const {
+    dates,
+    isWeekdayHeader,
+    events = [],
+    eventPosition,
+    onPressEvent,
+    onPressCell,
+  } = 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);
+  }
+
+  return (
+    <View style={styles.container}>
+      {dates.map((djs, dateIndex) => {
+        const text = isWeekdayHeader ? djs.format('ddd') : djs.format('D');
+        const filteredEvents = 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;
+          });
+
+        const rows: (CalendarEvent | number)[] = [];
+        if (weekId && eventPosition) {
+          const rowNums = eventPosition.getRowNums({
+            weekId,
+            date: djs.toDate(),
+          });
+          const rowsLength = rowNums.length + filteredEvents.length;
+          let eventIndex = 0;
+          for (let ii = 1; ii <= rowsLength; ii++) {
+            if (rowNums.includes(ii)) {
+              rows.push(ii);
+            } else {
+              const event = filteredEvents[eventIndex];
+              if (event) {
+                rows.push(event);
+              }
+              eventIndex++;
+            }
+          }
+        }
+        return (
+          <TouchableOpacity
+            key={isWeekdayHeader ? djs.get('d') : djs.get('date')}
+            style={[
+              styles.dayCellCountainer,
+              isWeekdayHeader ? { minHeight: undefined } : {},
+              { zIndex: 7 - dateIndex },
+            ]}
+            onPress={() => {
+              onPressCell?.(djs.toDate());
+            }}
+          >
+            <View style={styles.dayCellLabel}>
+              <Text style={styles.dayCellText}>{text}</Text>
+            </View>
+            {rows.map((eventRow, rowIndex) => {
+              if (typeof eventRow === 'number') {
+                return (
+                  <View
+                    key={eventRow}
+                    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 diffDays = endDjs.diff(startDjs, 'day');
+              const isPrevDateEvent =
+                dateIndex === 0 && rawStartDjs.isBefore(djs);
+              let width =
+                (diffDays + 1) * dateColumnWidth -
+                EVENT_GAP * 2 -
+                CELL_BORDER_WIDTH * 2;
+
+              if (isPrevDateEvent) {
+                width += EVENT_GAP + 1;
+              }
+
+              const isLastRow = rowIndex === rows.length - 1;
+
+              if (eventPosition && weekId) {
+                eventPosition.push({
+                  weekId,
+                  startDate: eventRow.start,
+                  days: diffDays + 1,
+                  rowNum: rowIndex + 1,
+                });
+              }
+
+              return (
+                <TouchableOpacity
+                  key={eventRow.id}
+                  style={[
+                    styles.event,
+                    {
+                      backgroundColor: eventRow.backgroundColor,
+                      borderColor: eventRow.borderColor,
+                      width: width,
+                      height: eventHeight,
+                    },
+                    isPrevDateEvent ? styles.prevDateEvent : {},
+                    isLastRow ? styles.lastRowEvent : {},
+                  ]}
+                  onPress={() => {
+                    onPressEvent?.(eventRow);
+                  }}
+                >
+                  <Text
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                    style={[styles.eventTitle, { color: eventRow.color }]}
+                  >
+                    {eventRow.title}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  dayCellCountainer: {
+    minHeight: 80,
+    flex: 1,
+    borderRightWidth: CELL_BORDER_WIDTH,
+    borderBottomWidth: CELL_BORDER_WIDTH,
+    borderColor: 'lightslategrey',
+    backgroundColor: 'white',
+  },
+  dayCellLabel: {
+    paddingVertical: 1,
+    paddingHorizontal: 2,
+  },
+  dayCellText: {
+    textAlign: 'center',
+    fontSize: 12,
+  },
+  event: {
+    borderWidth: 0.5,
+    borderRadius: 4,
+    paddingHorizontal: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    boxShadow: '0 0 2px 0 rgba(0, 0, 0, 0.1)',
+    marginTop: EVENT_GAP,
+    marginLeft: EVENT_GAP,
+  },
+  prevDateEvent: {
+    marginLeft: -1,
+    borderTopStartRadius: 0,
+    borderBottomStartRadius: 0,
+  },
+  lastRowEvent: {
+    marginBottom: EVENT_GAP,
+  },
+  eventTitle: {
+    fontSize: 10,
+  },
+});

package/src/constants/size.ts

@@ -0,0 +1,2 @@
+export const CELL_BORDER_WIDTH = 0.2;
+export const EVENT_GAP = 2;

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { MonthCalendar } from './calendar/month-calendar/MonthCalendar';
+export type { CalendarEvent } from './types/month-calendar';

package/src/types/month-calendar.ts

@@ -0,0 +1,11 @@
+export type WeekStartsOn = 0 | 1;
+
+export type CalendarEvent = {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  backgroundColor: string;
+  borderColor: string;
+  color: string;
+};

package/src/utils/functions.ts

@@ -0,0 +1,79 @@
+import dayjs from 'dayjs';
+import type { WeekStartsOn } from '../types/month-calendar';
+
+export function monthlyStartDate(args: {
+  date: Date;
+  weekStartsOn: WeekStartsOn;
+}) {
+  const { date, weekStartsOn } = args;
+  const djs = dayjs(date);
+  if (weekStartsOn === 0) {
+    return djs.startOf('month').startOf('week').toDate();
+  } else {
+    const startOfMonth = djs.startOf('month');
+    if (startOfMonth.day() === 1) {
+      return startOfMonth.toDate();
+    } else if (startOfMonth.day() === 0) {
+      return startOfMonth.subtract(6, 'day').toDate();
+    } else {
+      return startOfMonth.subtract(startOfMonth.day() - 1, 'day').toDate();
+    }
+  }
+}
+
+export function monthlyEndDate(args: {
+  date: Date;
+  weekStartsOn: WeekStartsOn;
+}) {
+  const { date, weekStartsOn } = args;
+  const djs = dayjs(date);
+  if (weekStartsOn === 0) {
+    return djs.endOf('month').endOf('week').toDate();
+  } else {
+    const endOfMonth = djs.endOf('month');
+    if (endOfMonth.day() === 0) {
+      return endOfMonth.toDate();
+    } else {
+      return endOfMonth.add(7 - endOfMonth.day(), 'day').toDate();
+    }
+  }
+}
+
+export function getWeekIds(args: {
+  start: Date;
+  end: Date;
+  weekStartsOn: WeekStartsOn;
+}) {
+  const { start, end, weekStartsOn } = args;
+  const startDjs = dayjs(start);
+  const endDjs = dayjs(end);
+  const weekIds: string[] = [];
+  let current = startDjs;
+  if (weekStartsOn === 0) {
+    while (current.isSame(endDjs) || current.isBefore(endDjs)) {
+      const weekId = current.startOf('week').format('YYYY-MM-DD');
+      if (!weekIds.includes(weekId)) {
+        weekIds.push(weekId);
+      }
+      current = current.add(1, 'day');
+    }
+  } else {
+    while (current.isSame(endDjs) || current.isBefore(endDjs)) {
+      if (current.day() === 0) {
+        const weekId = current.subtract(6, 'day').format('YYYY-MM-DD');
+        if (!weekIds.includes(weekId)) {
+          weekIds.push(weekId);
+        }
+      } else {
+        const weekId = current
+          .subtract(current.day() - 1, 'day')
+          .format('YYYY-MM-DD');
+        if (!weekIds.includes(weekId)) {
+          weekIds.push(weekId);
+        }
+      }
+      current = current.add(1, 'day');
+    }
+  }
+  return weekIds;
+}

package/src/utils/month-calendar-event-position.ts

@@ -0,0 +1,68 @@
+class MonthCalendarEventPosition {
+  public record: Record<string, Record<string, number[]>> = {};
+  constructor() {}
+
+  private generateKey(date: Date): string {
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    return `${year}-${month}-${day}`;
+  }
+
+  public push(arg: {
+    weekId: string;
+    startDate: Date;
+    days: number;
+    rowNum: number;
+  }) {
+    const { weekId, startDate, days, rowNum } = arg;
+
+    for (let i = 0; i < days; i++) {
+      const date = new Date(startDate);
+      date.setDate(date.getDate() + i);
+      const key = this.generateKey(date);
+      if (!this.record[weekId]) {
+        this.record[weekId] = {};
+      }
+      if (!this.record[weekId][key]) {
+        this.record[weekId][key] = [];
+      }
+      this.record[weekId][key]?.push(rowNum);
+    }
+  }
+
+  public getMaxRowNum(arg: { weekId: string; date: Date }): number {
+    const { weekId, date } = arg;
+    const key = this.generateKey(date);
+    const resourceRecord = this.record[weekId];
+    if (!resourceRecord) {
+      return 0;
+    }
+
+    const indexes = resourceRecord[key];
+
+    if (indexes === undefined || indexes.length === 0) {
+      return 0;
+    }
+
+    return Math.max(...indexes);
+  }
+
+  public getRowNums(arg: { weekId: string; date: Date }): number[] {
+    const { weekId, date } = arg;
+    const key = this.generateKey(date);
+    const resourceRecord = this.record[weekId];
+    if (!resourceRecord) {
+      return [];
+    }
+    if (!resourceRecord[key]) {
+      return [];
+    }
+    return resourceRecord[key];
+  }
+
+  public resetResource(weekId: string) {
+    this.record[weekId] = {};
+  }
+}
+export default MonthCalendarEventPosition;