react-native-ll-calendar 0.1.1

package/lib/typescript/src/calendar/month-calendar/MonthCalendar.d.ts

@@ -0,0 +1,10 @@
+import type { CalendarEvent, WeekStartsOn } from '../../types/month-calendar';
+export declare const MonthCalendar: (props: {
+    defaultDate: Date;
+    weekStartsOn?: WeekStartsOn;
+    onChangeDate?: (date: Date) => void;
+    events: CalendarEvent[];
+    onPressEvent?: (event: CalendarEvent) => void;
+    onPressCell?: (date: Date) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MonthCalendar.d.ts.map

package/lib/typescript/src/calendar/month-calendar/MonthCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/calendar/month-calendar/MonthCalendar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK9E,eAAO,MAAM,aAAa,GAAI,OAAO;IACnC,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,4CA8EA,CAAC"}

package/lib/typescript/src/calendar/month-calendar/logic/useEvents.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarEvent, WeekStartsOn } from '../../../types/month-calendar';
+export declare const useEvents: (props: {
+    events: CalendarEvent[];
+    weekStartsOn: WeekStartsOn;
+}) => {
+    eventsGroupByWeekId: Record<string, CalendarEvent[]>;
+};
+//# sourceMappingURL=useEvents.d.ts.map

package/lib/typescript/src/calendar/month-calendar/logic/useEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEvents.d.ts","sourceRoot":"","sources":["../../../../../../src/calendar/month-calendar/logic/useEvents.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACb,MAAM,+BAA+B,CAAC;AAGvC,eAAO,MAAM,SAAS,GAAI,OAAO;IAC/B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,EAAE,YAAY,CAAC;CAC5B;;CAwBA,CAAC"}

package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarViewItem.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarEvent, WeekStartsOn } from '../../../types/month-calendar';
+export declare const MonthCalendarViewItem: (props: {
+    month: string;
+    weekStartsOn: WeekStartsOn;
+    events: CalendarEvent[];
+    onPressEvent?: (event: CalendarEvent) => void;
+    onPressCell?: (date: Date) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MonthCalendarViewItem.d.ts.map

package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarViewItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthCalendarViewItem.d.ts","sourceRoot":"","sources":["../../../../../../src/calendar/month-calendar/view/MonthCalendarViewItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACb,MAAM,+BAA+B,CAAC;AAMvC,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,4CAoDA,CAAC"}

package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarWeekRow.d.ts

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import type { CalendarEvent } from '../../../types/month-calendar';
+import type MonthCalendarEventPosition from '../../../utils/month-calendar-event-position';
+export declare const MonthCalendarWeekRow: (props: {
+    dates: dayjs.Dayjs[];
+    isWeekdayHeader?: boolean;
+    events?: CalendarEvent[];
+    eventPosition?: MonthCalendarEventPosition;
+    onPressEvent?: (event: CalendarEvent) => void;
+    onPressCell?: (date: Date) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MonthCalendarWeekRow.d.ts.map

package/lib/typescript/src/calendar/month-calendar/view/MonthCalendarWeekRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthCalendarWeekRow.d.ts","sourceRoot":"","sources":["../../../../../../src/calendar/month-calendar/view/MonthCalendarWeekRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,0BAA0B,MAAM,8CAA8C,CAAC;AAG3F,eAAO,MAAM,oBAAoB,GAAI,OAAO;IAC1C,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC,4CAgJA,CAAC"}

package/lib/typescript/src/constants/size.d.ts

@@ -0,0 +1,3 @@
+export declare const CELL_BORDER_WIDTH = 0.2;
+export declare const EVENT_GAP = 2;
+//# sourceMappingURL=size.d.ts.map

package/lib/typescript/src/constants/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../src/constants/size.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,SAAS,IAAI,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { MonthCalendar } from './calendar/month-calendar/MonthCalendar';
+export type { CalendarEvent } from './types/month-calendar';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/typescript/src/types/month-calendar.d.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;
+};
+//# sourceMappingURL=month-calendar.d.ts.map

package/lib/typescript/src/types/month-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-calendar.d.ts","sourceRoot":"","sources":["../../../../src/types/month-calendar.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/lib/typescript/src/utils/functions.d.ts

@@ -0,0 +1,15 @@
+import type { WeekStartsOn } from '../types/month-calendar';
+export declare function monthlyStartDate(args: {
+    date: Date;
+    weekStartsOn: WeekStartsOn;
+}): Date;
+export declare function monthlyEndDate(args: {
+    date: Date;
+    weekStartsOn: WeekStartsOn;
+}): Date;
+export declare function getWeekIds(args: {
+    start: Date;
+    end: Date;
+    weekStartsOn: WeekStartsOn;
+}): string[];
+//# sourceMappingURL=functions.d.ts.map

package/lib/typescript/src/utils/functions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../../src/utils/functions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE;IACrC,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,YAAY,CAAC;CAC5B,QAeA;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE;IACnC,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,YAAY,CAAC;CAC5B,QAaA;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE;IAC/B,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,YAAY,EAAE,YAAY,CAAC;CAC5B,YAiCA"}

package/lib/typescript/src/utils/month-calendar-event-position.d.ts

@@ -0,0 +1,22 @@
+declare class MonthCalendarEventPosition {
+    record: Record<string, Record<string, number[]>>;
+    constructor();
+    private generateKey;
+    push(arg: {
+        weekId: string;
+        startDate: Date;
+        days: number;
+        rowNum: number;
+    }): void;
+    getMaxRowNum(arg: {
+        weekId: string;
+        date: Date;
+    }): number;
+    getRowNums(arg: {
+        weekId: string;
+        date: Date;
+    }): number[];
+    resetResource(weekId: string): void;
+}
+export default MonthCalendarEventPosition;
+//# sourceMappingURL=month-calendar-event-position.d.ts.map

package/lib/typescript/src/utils/month-calendar-event-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-calendar-event-position.d.ts","sourceRoot":"","sources":["../../../../src/utils/month-calendar-event-position.ts"],"names":[],"mappings":"AAAA,cAAM,0BAA0B;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,CAAM;;IAG7D,OAAO,CAAC,WAAW;IAOZ,IAAI,CAAC,GAAG,EAAE;QACf,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,IAAI,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB;IAiBM,YAAY,CAAC,GAAG,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,MAAM;IAiBzD,UAAU,CAAC,GAAG,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,MAAM,EAAE;IAazD,aAAa,CAAC,MAAM,EAAE,MAAM;CAGpC;AACD,eAAe,0BAA0B,CAAC"}

package/package.json

@@ -0,0 +1,157 @@
+{
+  "name": "react-native-ll-calendar",
+  "version": "0.1.1",
+  "description": "ReactNative Calendar Library",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-ll-calendar-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uemura1114/react-native-ll-calendar.git"
+  },
+  "author": "Wataru Uemura <uemura1114@gmail.com> (https://github.com/uemura1114)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/uemura1114/react-native-ll-calendar/issues"
+  },
+  "homepage": "https://github.com/uemura1114/react-native-ll-calendar#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.3"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.18"
+  }
+}

package/src/calendar/month-calendar/MonthCalendar.tsx

@@ -0,0 +1,94 @@
+import { useWindowDimensions, FlatList } from 'react-native';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import type { CalendarEvent, WeekStartsOn } from '../../types/month-calendar';
+import { MonthCalendarViewItem } from './view/MonthCalendarViewItem';
+
+const HALF_PANEL_LENGTH = 120; // 10 years
+
+export const MonthCalendar = (props: {
+  defaultDate: Date;
+  weekStartsOn?: WeekStartsOn;
+  onChangeDate?: (date: Date) => void;
+  events: CalendarEvent[];
+  onPressEvent?: (event: CalendarEvent) => void;
+  onPressCell?: (date: Date) => void;
+}) => {
+  const {
+    defaultDate,
+    weekStartsOn = 0,
+    onChangeDate,
+    events,
+    onPressEvent,
+    onPressCell,
+  } = props;
+  const [dateState] = useState(defaultDate);
+  const [_activeIndex, setActiveIndex] = useState(HALF_PANEL_LENGTH);
+  const defaultDateDjs = dayjs(dateState);
+  const startOfDefaultDateDjs = defaultDateDjs.startOf('month');
+  const prevPanels: string[] = Array.from(
+    { length: HALF_PANEL_LENGTH },
+    (_, i) => {
+      return startOfDefaultDateDjs
+        .subtract(HALF_PANEL_LENGTH - i, 'month')
+        .format('YYYY-MM');
+    }
+  );
+  const nextPanels: string[] = Array.from(
+    { length: HALF_PANEL_LENGTH },
+    (_, i) => {
+      return startOfDefaultDateDjs.add(i + 1, 'month').format('YYYY-MM');
+    }
+  );
+  const panels: string[] = [
+    ...prevPanels,
+    startOfDefaultDateDjs.format('YYYY-MM'),
+    ...nextPanels,
+  ];
+
+  const { width } = useWindowDimensions();
+
+  return (
+    <FlatList
+      horizontal
+      pagingEnabled={true}
+      getItemLayout={(_data, index) => {
+        return {
+          length: width,
+          offset: width * index,
+          index,
+        };
+      }}
+      onMomentumScrollEnd={(e) => {
+        const scrollX = e.nativeEvent.contentOffset.x;
+        const newIndex = Math.round(scrollX / width);
+        const month = panels[newIndex];
+        if (month) {
+          const newDate = new Date(month);
+          onChangeDate?.(newDate);
+        }
+        setActiveIndex(newIndex);
+      }}
+      initialScrollIndex={HALF_PANEL_LENGTH}
+      decelerationRate={'fast'}
+      data={panels}
+      renderItem={({ item }) => {
+        return (
+          <MonthCalendarViewItem
+            month={item}
+            weekStartsOn={weekStartsOn}
+            events={events}
+            onPressEvent={onPressEvent}
+            onPressCell={onPressCell}
+          />
+        );
+      }}
+      showsHorizontalScrollIndicator={false}
+      scrollEnabled={true}
+      windowSize={5}
+      initialNumToRender={5}
+      maxToRenderPerBatch={5}
+      removeClippedSubviews={false}
+    />
+  );
+};

package/src/calendar/month-calendar/logic/useEvents.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import type {
+  CalendarEvent,
+  WeekStartsOn,
+} from '../../../types/month-calendar';
+import { getWeekIds } from '../../../utils/functions';
+
+export const useEvents = (props: {
+  events: CalendarEvent[];
+  weekStartsOn: WeekStartsOn;
+}) => {
+  const { events, weekStartsOn } = props;
+
+  const eventsGroupByWeekId: Record<string, CalendarEvent[]> = useMemo(() => {
+    const groupedEvents: Record<string, CalendarEvent[]> = {};
+
+    events.forEach((event) => {
+      const weekIds: string[] = getWeekIds({
+        start: event.start,
+        end: event.end,
+        weekStartsOn,
+      });
+      weekIds.forEach((weekId) => {
+        if (!groupedEvents[weekId]) {
+          groupedEvents[weekId] = [];
+        }
+        groupedEvents[weekId].push(event);
+      });
+    });
+
+    return groupedEvents;
+  }, [events, weekStartsOn]);
+
+  return { eventsGroupByWeekId };
+};

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

@@ -0,0 +1,88 @@
+import dayjs from 'dayjs';
+import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { MonthCalendarWeekRow } from './MonthCalendarWeekRow';
+import type {
+  CalendarEvent,
+  WeekStartsOn,
+} from '../../../types/month-calendar';
+import MonthCalendarEventPosition from '../../../utils/month-calendar-event-position';
+import { monthlyEndDate, monthlyStartDate } from '../../../utils/functions';
+import { useEvents } from '../logic/useEvents';
+import { CELL_BORDER_WIDTH } from '../../../constants/size';
+
+export const MonthCalendarViewItem = (props: {
+  month: string;
+  weekStartsOn: WeekStartsOn;
+  events: CalendarEvent[];
+  onPressEvent?: (event: CalendarEvent) => void;
+  onPressCell?: (date: Date) => void;
+}) => {
+  const { month, weekStartsOn, events, onPressEvent, onPressCell } = props;
+  const { width } = useWindowDimensions();
+  const eventPosition = new MonthCalendarEventPosition();
+
+  const date = new Date(month);
+  const dateDjs = dayjs(date);
+  const startDate = monthlyStartDate({ date, weekStartsOn });
+  const endDate = monthlyEndDate({ date, weekStartsOn });
+  const endDjs = dayjs(endDate);
+  const weeks: dayjs.Dayjs[][] = [];
+  let currentDate = dayjs(startDate);
+  while (currentDate.isBefore(endDjs)) {
+    const week = Array.from({ length: 7 }, (_, i) => {
+      return currentDate.add(i, 'day');
+    });
+    weeks.push(week);
+    currentDate = currentDate.add(7, 'day');
+  }
+
+  const { eventsGroupByWeekId } = useEvents({ events, weekStartsOn });
+
+  return (
+    <View style={[styles.container, { width }]}>
+      <View style={styles.monthContainer}>
+        <Text style={styles.monthText}>{dateDjs.format('YYYY/MM')}</Text>
+      </View>
+      <View>
+        <MonthCalendarWeekRow dates={weeks[0] ?? []} isWeekdayHeader={true} />
+      </View>
+      <View>
+        {weeks.map((week, index) => {
+          const firstDayOfWeek = week[0];
+          if (firstDayOfWeek === undefined) {
+            return null;
+          }
+          const weekId = firstDayOfWeek.format('YYYY-MM-DD');
+          const weekEvents = eventsGroupByWeekId[weekId] || [];
+          return (
+            <MonthCalendarWeekRow
+              key={`row-${index}`}
+              dates={week}
+              events={weekEvents}
+              eventPosition={eventPosition}
+              onPressEvent={onPressEvent}
+              onPressCell={onPressCell}
+            />
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: CELL_BORDER_WIDTH,
+    borderColor: 'lightslategrey',
+    alignSelf: 'flex-start',
+  },
+  monthContainer: {
+    padding: 2,
+    borderWidth: CELL_BORDER_WIDTH,
+    borderColor: 'lightslategrey',
+    backgroundColor: 'white',
+  },
+  monthText: {
+    textAlign: 'center',
+  },
+});