{"_id":"@awaishere/react-native-big-calendar","name":"@awaishere/react-native-big-calendar","dist-tags":{"latest":"5.0.0-awaishere.0"},"versions":{"5.0.0-awaishere.0":{"name":"@awaishere/react-native-big-calendar","version":"5.0.0-awaishere.0","main":"build/index.js","jsnext:main":"build/index.es.js","module":"build/index.es.js","types":"build/index.d.ts","repository":{"type":"git","url":"git+ssh://git@github.com/awaishere/react-native-big-calendar.git"},"author":{"name":"awaishere","email":"awaishere007@gmail.com"},"license":"MIT","publishConfig":{"access":"public"},"scripts":{"storybook":"storybook dev -p 7007","build-storybook":"NODE_OPTIONS='--openssl-legacy-provider' storybook build -o .storybook-build","sync-demo":"bun run build && cp -r build expo-demo/node_modules/react-native-big-calendar && echo 'copied build to expo-demo'","test":"jest","lint":"biome check --error-on-warnings --files-ignore-unknown=true","lint:fix":"biome check --write --unsafe --files-ignore-unknown=true","watch":"rollup -cw","prepublish":"bun run build","build":"bun run build:clean && bun run build:ts","build:clean":"rimraf build/","build:ts":"env NODE_ENV=production rollup -c"},"dependencies":{"calendarize":"^1.1.1","dayjs":"^1.11.13"},"peerDependencies":{"react":">=18.0.0","react-native":">=0.65.0","react-native-gesture-handler":">=2.2.0","react-native-infinite-pager":">=0.3.18","react-native-reanimated":">=3.0.0"},"devDependencies":{"@babel/core":"^7.26.8","@babel/helper-builder-react-jsx-experimental":"^7.12.11","@babel/plugin-proposal-export-namespace-from":"^7.18.9","@babel/plugin-proposal-private-property-in-object":"^7.21.11","@babel/preset-env":"^7.26.8","@babel/preset-react":"^7.26.3","@biomejs/biome":"^1.9.4","@react-native-picker/picker":"^2.6.1","@react-native/babel-preset":"^0.77.0","@storybook/addon-react-native-web":"^0.0.27","@storybook/addon-webpack5-compiler-babel":"^3.0.5","@storybook/react":"^8.5.5","@storybook/react-webpack5":"^8.5.5","@swc/core":"^1.7.22","@swc/jest":"^0.2.29","@types/jest":"^29.5.6","@types/node":"^20.8.0","@types/react-native":"^0.65.0","acorn-jsx":"^5.3.2","babel-loader":"^9.1.3","babel-plugin-react-native-web":"^0.19.13","jest":"^29.7.0","mockdate":"^3.0.5","node-polyfill-webpack-plugin":"^4.1.0","npm-run-all":"^4.1.5","react":"^18.2.0","react-dom":"^18.2.0","react-native":"^0.76.6","react-native-web":"^0.19.13","rimraf":"^5.0.5","rollup":"^2.79.1","rollup-plugin-typescript2":"^0.36.0","storybook":"^8.5.5","tailwind-rn":"^3.0.1","ts-loader":"^9.5.1","typescript":"^5.4.5","webpack-merge":"^5.10.0"},"importSort":{".js, .jsx, .ts, .tsx":{"style":"module","parser":"typescript"}},"volta":{"node":"22.13.0","yarn":"1.22.22"},"trustedDependencies":["@swc/core"],"_id":"@awaishere/react-native-big-calendar@5.0.0-awaishere.0","gitHead":"958664597d7e7e65e2c6b80e58c8f6a5f22c2745","description":"![test](https://github.com/acro5piano/react-native-big-calendar/workflows/test/badge.svg) ![release](https://github.com/acro5piano/react-native-big-calendar/workflows/release/badge.svg) [![npm version](https://badge.fury.io/js/react-native-big-calendar.sv","bugs":{"url":"https://github.com/awaishere/react-native-big-calendar/issues"},"homepage":"https://github.com/awaishere/react-native-big-calendar#readme","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-pxkVdn4GMHPlNTyRXG7AM7D8AoPOtfGEfnduz3w/jHOwsleT9jwhWD4zfwRI6C7nRs6zyrBfaz9I1MvBtYz19A==","shasum":"02eed927c2372a5be59261c95697b13b822c57d7","tarball":"https://registry.npmjs.org/@awaishere/react-native-big-calendar/-/react-native-big-calendar-5.0.0-awaishere.0.tgz","fileCount":34,"unpackedSize":658088,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDhHB/8ttvxh1LN1xJ6JRCICO+QyGHeLbJ4TkIsWCRtngIgKnfjfU72EpCMu21WWzITpwzjTdhxgzLzznzRQ20buBA="}]},"_npmUser":{"name":"awaishere","email":"awaishere007@gmail.com"},"directories":{},"maintainers":[{"name":"awaishere","email":"awaishere007@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-big-calendar_5.0.0-awaishere.0_1773771947838_0.8816469574015491"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-17T18:25:47.703Z","5.0.0-awaishere.0":"2026-03-17T18:25:47.985Z","modified":"2026-03-17T18:25:48.281Z"},"maintainers":[{"name":"awaishere","email":"awaishere007@gmail.com"}],"description":"![test](https://github.com/acro5piano/react-native-big-calendar/workflows/test/badge.svg) ![release](https://github.com/acro5piano/react-native-big-calendar/workflows/release/badge.svg) [![npm version](https://badge.fury.io/js/react-native-big-calendar.sv","homepage":"https://github.com/awaishere/react-native-big-calendar#readme","repository":{"type":"git","url":"git+ssh://git@github.com/awaishere/react-native-big-calendar.git"},"author":{"name":"awaishere","email":"awaishere007@gmail.com"},"bugs":{"url":"https://github.com/awaishere/react-native-big-calendar/issues"},"license":"MIT","readme":"![test](https://github.com/acro5piano/react-native-big-calendar/workflows/test/badge.svg)\n![release](https://github.com/acro5piano/react-native-big-calendar/workflows/release/badge.svg)\n[![npm version](https://badge.fury.io/js/react-native-big-calendar.svg)](https://badge.fury.io/js/react-native-big-calendar)\n\n# react-native-big-calendar\n\nCross-platform gcal/outlook like calendar component for React Native.\n\n### ⚠️ Help me to debug this component ⚠️\n\nIt's a hard task to debug this library on three platforms. I usually develop with the Web version first, then confirm its functionality with real devices. My PC is Linux and my phone is Android, so on Android it is easy to test, but to debug on iOS, I have to bring my Macbook Pro from my garage and connect my wife's iPhone and test it. Every time I launch my MacBook Pro, it requires updating Xcode or even performing a full system update.. It takes so long time to start debug. As React Native works on iOS better than Android, I ~~always~~ sometimes skip testing it, so there should be a bug on iOS. If you help me debug it, I would much appreciate!\n\n[Components Demo](https://react-native-big-calendar.vercel.app)\n\n<img src=\"./assets/screenshot-mobile.png\" height=\"500\">\n\n<img src=\"https://user-images.githubusercontent.com/10719495/117629046-b98a2480-b1b4-11eb-89df-02c373438e45.png\" height=\"500\">\n\n# Features\n\n- Cross Platform: Runs on the Web, iOS, Android with the power of React\n- Type-safe: Fully written in TypeScript\n- Customizable: Able to provide your own theme, and pass your component to render.\n- Lightweight: ~9KB (min + gzip), dependency is `dayjs` and `calendarize`\n\n# Install\n\n```\nnpm install --save react-native-big-calendar@next\n```\n\nOr if you use Yarn:\n\n```\nyarn add react-native-big-calendar@next\n```\n\n> NOTE: The `next` version is a beta release that includes the [awesome swipe animations](https://github.com/acro5piano/react-native-big-calendar/pull/1135). If you encounter any issues with the `next` version, please consider using the stable version by running `yarn add react-native-big-calendar`.\n\n### Other dependencies\n\nPlease ensure peer dependencies are installed.\n\n```sh\nnpm install react react-native react-native-gesture-handler react-native-infinite-pager react-native-reanimated\n```\n\n### TypeScript\n\nIf you use TypeScript ensure `@types/react` and `@types/react-native` is installed. `react-native-big-calendar` internally uses them.\n\n```sh\nnpm install --save-dev @types/react @types/react-native\n```\n\n### Usage on the Web\n\nIf you are using this module on the Web, please install `react-native-web`.\n\n```sh\nnpm install react-native-web\n```\n\nIf you are using Create React App, you are ready to go 🎉\n\nFor more details, please refer to the official react-native-web installation guide.\n\nhttps://github.com/necolas/react-native-web\n\n# Getting Started\n\nWrap the Calendar component on a GestureHandlerRootView:\n\n```typescript\nimport { GestureHandlerRootView } from 'react-native-gesture-handler'\nimport { Calendar } from 'react-native-big-calendar'\n\nconst events = [\n  {\n    title: 'Meeting',\n    start: new Date(2020, 1, 11, 10, 0),\n    end: new Date(2020, 1, 11, 10, 30),\n  },\n  {\n    title: 'Coffee break',\n    start: new Date(2020, 1, 11, 15, 45),\n    end: new Date(2020, 1, 11, 16, 30),\n  },\n]\n\nfunction App() {\n  return (\n    <GestureHandlerRootView style={{ flex: 1 }}>\n      <Calendar events={events} height={600} />\n    </GestureHandlerRootView>\n  )\n}\n```\n\n# API Documentation\n\n**Summary**\n\n```typescript\nexport interface CalendarProps<T extends ICalendarEventBase> {\n  events: T\n  height: number\n  overlapOffset?: number\n  hourRowHeight?: number\n  ampm?: boolean\n  date?: Date\n  eventCellStyle?: EventCellStyle<T>\n  eventCellAccessibilityProps?: AccessibilityProps\n  eventCellTextColor?: string\n  allDayEventCellStyle?: allDayEventCellStyle<T>\n  allDayEventCellAccessibilityProps?: AccessibilityProps\n  calendarCellAccessibilityPropsForMonthView?: AccessiblityProps\n  allDayEventCellTextColor?: string\n  calendarContainerStyle?: ViewStyle\n  calendarCellAccessibilityProps?: AccessibilityProps\n  headerContainerStyle?: ViewStyle\n  headerContainerAccessibilityProps?: AccessibilityProps\n  headerCellAccessibilityProps?: AccessibilityProps\n  bodyContainerStyle?: ViewStyle\n  renderEvent?: (\n    event: T,\n    touchableOpacityProps: CalendarTouchableOpacityProps,\n  ) => ReactElement | null\n  renderHeader?: React.ComponentType<CalendarHeaderProps<T> & { mode: Mode }>\n  renderHeaderForMonthView?: React.ComponentType<CalendarHeaderForMonthViewProps>\n  locale?: string\n  hideNowIndicator?: boolean\n  mode?: Mode\n  scrollOffsetMinutes?: number\n  showTime?: boolean\n  minHour?: number\n  maxHour?: number\n  minIndex?: number\n  maxIndex?: number\n  swipeEnabled?: boolean\n  weekStartsOn?: WeekNum\n  weekEndsOn?: WeekNum\n  onChangeDate?: DateRangeHandler\n  onPressCell?: (date: Date) => void\n  onPressDateHeader?: (date: Date) => void\n  onPressEvent?: (event: ICalendarEvent<T>) => void\n  eventMinHeightForMonthView?: number\n  activeDate?: Date\n  moreLabel?: string\n  showAdjacentMonths?: boolean\n  sortedMonthView?: boolean\n  showVerticalScrollIndicator?: boolean\n  verticalScrollEnabled?: boolean\n  timeslots?: number\n  resetPageOnPressCell?: boolean\n}\n```\n\n`<Calendar />` Props are:\n\n| name                                         | required | type                                                              | description                                                                                                                                                                                                                                                                                                                                                                                                                                                       |\n|----------------------------------------------|----------|-------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `events`                                     | yes      | `ICalendarEvent<T>[]`                                             | The events which will be rendered on the calendar. You can extend the type `ICalendarEvent` by providing a value to generic type T (see `./stories/events.tsx` for an example). with optional children to display custom components inside the event, and optional event renderer function to take complete control over the rendered event (advanced feature). Events occurring during the same time range will be layered, offset, and assigned a unique color. |\n| `height`                                     | yes      | `number`                                                          | Calendar height.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `hideNowIndicator`                           | no       | `boolean`                                                         | Hides the indicator for the current time. By default the now indicator is shown.                                                                                                                                                                                                                                                                                                                                                                                  |\n| `hourRowHeight`                              | no       | `number`                                                          | Hour row height                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `onPressEvent`                               | no       | `(event: ICalendarEvent<T>) => void`                              | Event handler which will be fired when the user clicks an event.                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `onChangeDate`                               | no       | `([start: Date, end: Date]) => void`                              | Event handler which will be fired when the current date range changed.                                                                                                                                                                                                                                                                                                                                                                                            |\n| `onPressCell`                                | no       | `(date: Date) => void`                                            | Event handler which will be fired when the current date cell is clicked. The minute set to 0.                                                                                                                                                                                                                                                                                                                                                                     |\n| `onLongPressCell`                            | no       | `(date: Date) => void`                                            | Same as above but triggered by a long press.                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `onPressDateHeader`                          | no       | `(date: Date) => void`                                            | Event handler which will be fired when the user clicks a date from the header.                                                                                                                                                                                                                                                                                                                                                                                    |\n| `mode`                                       | no       | `'month' \\| 'week' \\| '7days' \\| '4days' \\| '3days' \\| 'day' \\| 'schedule' \\| 'custom'` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `eventCellStyle`                             | no       | `ViewStyle \\| (event: ICalendarEvent<T>) => ViewStyle`            | The style of Event cell. Accepts either style object (static) or function (dynamic).                                                                                                                                                                                                                                                                                                                                                                              |\n| `eventCellAccessiblityProps`                 | no       | `AccessibilityProps`                                              | Accessibility properties of Event cell                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| `eventCellTextColor`                         | no       | `string`                                                          | The color of Event cell text.                                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| `allDayEventCellStyle`                       | no       | `ViewStyle \\| (event: ICalendarEvent<T>) => ViewStyle`            | The style of all day Event cell. Accepts either style object (static) or function (dynamic).                                                                                                                                                                                                                                                                                                                                                                      |\n| `allDayEventCellTextColor`                   | no       | `string`                                                          | The color of all day Event cell text.                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| `allDayEventCellAccessibilityProps`          | no       | `AccessibilityProps`                                              | Accessibility properties of all day Event cell text.                                                                                                                                                                                                                                                                                                                                                                                                              |\n| `calendarCellAccessibilityProps`             | no       | `AccessibilityProps`                                              | Accessibility properties of cells in calendar body, including the cells for hour.                                                                                                                                                                                                                                                                                                                                                                                 |\n| `calendarCellAccessibilityPropsForMonthView` | no       | `AccessibilityProps`                                              | Accessibility properties of date cells in calendar body for month view.                                                                                                                                                                                                                                                                                                                                                                                           |\n| `headerContentStyle`                         | no       | `ViewStyle`                                                       | The style of the Header's content. Accepts a style object (static).                                                                                                                                                                                                                                                                                                                                                                                               |\n| `headerContainerAccessibilityProps`          | no       | `AccessibilityProps`                                              | Accessiblity propertiees for Header container. Use set this to control ScreenReader to identify the entire Header row as a single accessible element                                                                                                                                                                                                                                                                                                              |\n| `headerCellAccessibilityProps`               | no       | `AccessibilityProps`                                              | Accessiblity propertiees for Header cell.                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| `dayHeaderStyle`                             | no       | `ViewStyle`                                                       | The style of the Header's day numbers. Accepts a style object (static).                                                                                                                                                                                                                                                                                                                                                                                           |\n| `dayHeaderHighlightColor`                    | no       | `string`                                                          | The style of the Header's highlighted day number. Accepts a style object (static).                                                                                                                                                                                                                                                                                                                                                                                |\n| `weekDayHeaderHighlightColor`                | no       | `string`                                                          | The style of the Header's highlighted week day. Accepts a style object (static).                                                                                                                                                                                                                                                                                                                                                                                  |\n| `scrollOffsetMinutes`                        | no       | `number`                                                          | Scroll to specific minutes in a day. e.g.) set `480` to scroll to 8am when the calendar rendered.                                                                                                                                                                                                                                                                                                                                                                 |\n| `date`                                       | no       | `Date`                                                            | Initial date of calendar. Defaults to `new Date` (current time).                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `onSwipeEnd`                                 | no       | `(date: Date) => void`                                            | Event handler which will be fired when swiping left or right. Memoize your function to prevent unnecesary re-renders                                                                                                                                                                                                                                                                                                                                              |\n| `swipeEnabled`                               | no       | `boolean`                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `showTime`                                   | no       | `boolean`                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `minIndex`                                   | no       | `number`                                                          | Minimum page index allowed by `react-native-infinite-pager`.                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `maxIndex`                                   | no       | `number`                                                          | Maximum page index allowed by `react-native-infinite-pager`.                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `minHour`                                    | no       | `number`                                                          | The first hour that will be displayed in week/day modes.                                                                                                                                                                                                                                                                                                                                                                                                          |\n| `maxHour`                                    | no       | `number`                                                          | The final hour that will be displayed in week/day modes.                                                                                                                                                                                                                                                                                                                                                                                                          |\n| `ampm`                                       | no       | `boolean`                                                         | Use 12 hours time format instead of 24 hours.                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| `weekStartsOn`                               | no       | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`                                 | Which day the week starts on. Sunday is `0`.                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `weekEndsOn`                                 | no       | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6`                                 | Which day the week ends on. Sunday is `0`.                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `locale`                                     | no       | `string`                                                          | Custom locale. See I18n section                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `overlapOffset`                              | no       | `number`                                                          | Adjusts the indentation of events that occur during the same time period. Defaults to 20 on web and 8 on mobile.                                                                                                                                                                                                                                                                                                                                                  |\n| `isRTL`                                      | no       | `boolean`                                                         | Switches the direction of the layout for use with RTL languages. Defaults to false.                                                                                                                                                                                                                                                                                                                                                                               |\n| `renderEvent`                                | no       | `EventRenderer`                                                   | Custom event renderer. See the type definition below.                                                                                                                                                                                                                                                                                                                                                                                                             |\n| `renderHeader`                               | no       | `HeaderRenderer`                                                  | Custom header renderer.                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| `eventMinHeightForMonthView`                 | no       | `number`                                                          | Minimun height for events in month view. Should match the min-height of your custom events. Defaults to 22.                                                                                                                                                                                                                                                                                                                                                       |\n| `activeDate`                                 | no       | `Date`                                                            | Date highlighted in header. Defaults to today (current time).                                                                                                                                                                                                                                                                                                                                                                                                     |\n| `headerComponent`                            | no       | `ReactElement`                                                    | Calendar body header component.                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| `headerComponentStyle`                       | no       | `ViewStyle`                                                       | Calendar body header component wrapper styling. Accepts a style object (static)                                                                                                                                                                                                                                                                                                                                                                                   |\n| `hourStyle`                                  | no       | `TextStyle`                                                       | Calendar body hours styling. Accepts a style object (static)                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `showAllDayEventCell`                        | no       | `boolean`                                                         | Boolean for showing/hiding the all day event cell                                                                                                                                                                                                                                                                                                                                                                                                                 |\n| `moreLabel`                                  | no       | `string`                                                          | String to replace More label in month view. Default: '{moreCount} More'. {moreCount} is replaced by number of extra events                                                                                                                                                                                                                                                                                                                                        |\n| `showAdjacentMonths`                         | no       | `boolean`                                                         | Boolean for showing/hiding adjacent months in month view. Defaults to true                                                                                                                                                                                                                                                                                                                                                                                        |\n| `sortedMonthView`                            | no       | `boolean`                                                         | (for performance) Boolean for sorting events in month view. Defaults to true                                                                                                                                                                                                                                                                                                                                                                                      |\n| `isEventOrderingEnabled`                     | no       | `boolean`                                                         | (for performance) Boolean for sorting events in all view. Defaults to true                                                                                                                                                                                                                                                                                                                                                                                        |\n| `renderCustomDateForMonth`                   | no       | `boolean`                                                         | Custom renderer for Date Cell                                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| `disableMonthEventCellPress`                 | no       | `boolean`                                                         | Prevent Month view event cells from being pressed. Defaults to false                                                                                                                                                                                                                                                                                                                                                                                              |\n| `itemSeparatorComponent`                     | no       | `ReactElement`                                                    | React Component for separate items in `schedule` mode. but not at the top or bottom. Refer [React Native FlatList `ItemSeparatorComponent`](https://reactnative.dev/docs/flatlist#itemseparatorcomponent) for more info.                                                                                                                                                                                                                                          |\n| `enrichedEventsByDate`                       | no       | `Record<string, T[]`                                              | (for performanace) Enriched events dictionary that will be used instead of building it inside the library.                                                                                                                                                                                                                                                                                                                                                        |\n| `enableEnrichedEvents`                       | no       | `boolean`                                                         | (for performance) Boolean for enabling [enrichedEvents](#EnrichedEvents) logic. Defaults to false                                                                                                                                                                                                                                                                                                                                                                 |\n| `eventsAreSorted`                            | no       | `boolean`                                                         | (for performance) Boolean for skip sorting the events inside the library due they are already sorted. Defaults to false                                                                                                                                                                                                                                                                                                                                           |\n| `showWeekNumber`                             | no       | `boolean`                                                         | Show week number. Week number will be shown at top left corner for week/day mode and at start of each row for month mode                                                                                                                                                                                                                                                                                                                                          |\n| `showSixWeeks`                               | no       | `boolean`                                                         | Show six weeks. Six weeks will always be rendered for month mode                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `weekNumberPrefix`                           | no       | `string`                                                          | Prefix for week number. For month mode, the prefix will be shown in header row.                                                                                                                                                                                                                                                                                                                                                                                   |\n| `maxVisibleEventCount`                       | no       | `number`                                                          | Maximum number of events to show in a cell in month view. If the number of events exceeds this value, the cell will show the `moreLabel`. Defaults to 3.                                                                                                                                                                                                                                                                                                          |\n| `timeslots`                                  | no       | `number`                                                          | Number of timeslots to render per Hour. Default to 0                                                                                                                                                                                                                                                                                                                                                                                                              |\n| `hourComponent`                              | no       | `HourRenderer`                                                    | Custom hour renderer                                                                                                                                                                                                                                                                                                                                                                                                                                              |\n| `scheduleMonthSeparatorStyle`                | no       | `TextStyle`                                                       | Schedule mode month separator styling. Accepts a style object (static)                                                                                                                                                                                                                                                                                                                                                                                            |\n| `verticalScrollEnabled`                      | no       | `boolean`                                                         | Indicates if the body of the calendar should be scrollable                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `resetPageOnPressCell`                       | no       | `boolean`                                                         | Reset the calendar to it's initial page on cell press                                                                                                                                                                                                                                                                                                                                                                                                             |\n\n## EventRenderer\n\n```typescript\ntype EventRenderer<T> = (\n  event: ICalendarEvent<T>,\n  touchableOpacityProps: CalendarTouchableOpacityProps,\n) => ReactElement | null\n```\n\nFor more information, see [Storybook](https://github.com/acro5piano/react-native-big-calendar/blob/main/stories/desktop.stories.tsx)\n\n## ICalendarEventBase\n\n```typescript\ninterface ICalendarEventBase {\n  start: Date\n  end: Date\n  title: string\n  children?: ReactElement | null\n  disabled?: boolean\n}\n```\n\n## HourRenderer\n\n```typescript\ntype HourRenderer = {\n  appm: boolean\n  hour: number\n}\n```\n\n## All day events\n\nAll day events should start and end on 0 in hour, minutes, and seconds (T00:00:00). For example:\n\n```typescript\n{\n    title: 'all day event',\n    start: \"2021-12-24T00:00:00.000Z\",\n    end: \"2021-12-24T00:00:00.000Z\", // same date as `start`\n}\n```\n\n## Using a custom event render function\n\nYou can specify custom event render function which receives the calculated `TouchableOpacity` prop and `event`.\n\n- The function `renderEvent` must return a `ReactElement`.\n- The component _should_ be wrapped inside a `TouchableOpacity` or _any_ DOM element which accepts positioning and click events (`onPress`, ...).\n\n```typescript\nexport interface MyCustomEventType {\n  color: string\n}\n\nconst renderEvent = <T extends ICalendarEventBase>(\n  event: T,\n  touchableOpacityProps: CalendarTouchableOpacityProps,\n) => (\n  <TouchableOpacity {...touchableOpacityProps}>\n    <Text>{`My custom event: ${event.title} with a color: ${event.color}`}</Text>\n  </TouchableOpacity>\n)\n\n<Calendar renderEvent={renderEvent} />\n```\n\n## Displaying event's notes\n\nYour events can contain a prop `children` An example can be found [here](./stories/events.tsx).\n\n```typescript\nconst eventNotes = useMemo(\n  () => (\n    <View style={{ marginTop: 3 }}>\n      <Text style={{ fontSize: 10, color: 'white' }}> Phone number: 555-123-4567 </Text>\n      <Text style={{ fontSize: 10, color: 'white' }}> Arrive 15 minutes early </Text>\n    </View>\n  ),\n  [],\n)\n\nexport const myEvents: ICalendarEventBase[] = [\n  {\n    title: 'Custom reminder',\n    start: dayjs().set('hour', 16).set('minute', 0).toDate(),\n    end: dayjs().set('hour', 17).set('minute', 0).toDate(),\n    children: eventNotes,\n  },\n]\n```\n\n## Theme\n\nYou can customize the calendar by passing the `theme` prop. `theme` should be like this interface partially:\n\n```typescript\nexport interface Palette {\n  main: string\n  contrastText: string\n}\n\nexport type Typography = Pick<\n  TextStyle,\n  | 'fontFamily'\n  | 'fontWeight'\n  | 'fontSize'\n  | 'lineHeight'\n  | 'letterSpacing'\n  | 'textAlign'\n>\n\nexport interface ThemeInterface {\n  palette: {\n    primary: Palette\n    nowIndicator: string\n    gray: {\n      100: string\n      200: string\n      300: string\n      500: string\n      800: string\n    }\n    moreLabel: string\n  }\n  isRTL: boolean\n  typography: {\n    fontFamily?: string\n    xs: Typography\n    sm: Typography\n    xl: Typography\n    moreLabel: Typography\n  }\n  eventCellOverlappings: readonly Palette[]\n  moreLabel: TextStyle\n}\n```\n\nFor example:\n\n```typescript\nconst darkTheme = {\n  palette: {\n    primary: {\n      main: '#6185d0',\n      contrastText: '#000',\n    },\n    gray: {\n      '100': '#333',\n      '200': '#666',\n      '300': '#888',\n      '500': '#aaa',\n      '800': '#ccc',\n    },\n  },\n}\n\n<Calendar\n  height={SCREEN_HEIGHT}\n  theme={darkTheme}\n/>\n```\n\n## I18n\n\nPlease specity your locale via `locale` prop **and** import day.js locale file:\n\n```typescript\nimport 'dayjs/locale/ja'\n\n<Calendar\n  locale=\"ja\"\n  {/* ... */}\n/>\n```\n\nYou can find your dayjs locale here:\n\nhttps://github.com/iamkun/dayjs/tree/dev/src/locale\n\n## Enriched Events Logic (Performance Boost)\n\n### Performant Data Structure\n\nWe create and cache a dictionary keyed by date with all the events properties plus the overlapping counting:\n\n```\n{\n    [YYYY-MM-DD]: [\n        {\n            ...all event information,\n            overlapPosition: int\n            overlapCount: int\n        }\n    ]\n}\n```\n\n### Multi-days events\n\nWhen an event spans multiple days, we create a new event for each day it spans. For example, an event that starts on 2021-05-01 and ends on 2021-05-03 will be represented as 3 events, one for each day with the following time props:\n\n```\n--- First day\n2021-05-01: {\n   ...other data\n   start: event start datetime\n   end: current day midnight\n}\n-- All the intermediate days:\n2021-05-02: {\n   ...other data\n   start: previous day midnight\n   end: current day midnight\n}\n-- Final day\n2021-05-03: {\n   ...other data\n   start: previous day midnight\n   end: event start datetime\n}\n```\n\n### Enriched Events Renderer\n\nOptimised renderer get each event from the dictionary and render them without adding any extra logic like filtering or sorting.\n\n### Preprocessed Data\n\nYou can build the dictionary by yourself and send it to the library through the prop `enrichedEventsByDate`.\n\nThis is specially useful for example when you want to build the dictionary in a background job.\n\n# Running demo on a real device and develop\n\n## Setup\n\nAfter checking this repo, please run:\n\n```sh\nbun install\nbun sync-demo\ncd expo-demo\nbun install\n```\n\n## Start\n\nStart React Native development server in the demo directory:\n\n```sh\ncd expo-demo\nbun start\n```\n\nEvery time you modify code of this library, you should run the following command in the root directory:\n\n```sh\nbun sync-demo\n```\n\n# Screenshots\n\n<img src=\"./assets/screenshot-mobile.png\" height=\"500\">\n<img src=\"./assets/screenshot-simulator.png\" height=\"500\">\n<img src=\"./assets/screenshot-desktop.png\" height=\"500\">\n\n# Who's using this?\n\n</p>\n<a href=\"https://www.telaqua.com?utm_source=react-native-big-calendar\">\n  <img src=\"https://user-images.githubusercontent.com/10719495/195131400-cd334757-caad-4ed8-ba73-786affa2a6b0.png\" height=\"80\" />\n</a>\n</p>\n\nIf you are using this library, please send a PR to add your organization!\n\n# Contribution\n\n- For stable version, please send PR to `v4` branch.\n- For beta version, please send PR to `main` branch.\n\n# Sponsors\n\n<p>\n<a href=\"https://moncargo.io?utm_source=react-native-big-calendar\">\n  <img src=\"https://images.ctfassets.net/jk5e9i3ije9y/1K8rFn7DeHTdGg9Mn4Hmzl/c95d1a87b7de549e1463e85a3a10829e/logo-with-text-copy__2_.png?h=250\" height=\"80\" />\n</a>\n</p>\n\n# Enterprise support\n\nFirst, thank you for your interest in this project. As this library is getting famous, lots of people are requesting features they need. I would like to respond all of them as possible, but there are limited hours I'm working on this. To be a full-time open sourcer and make this project sustainable, I've decided to add the enterprise support.\n\nEnterprise customers are able to obtain:\n\n- Full customization like colors, logos, images, and more.\n- Priority response and development.\n- Consultancy for React, TypeScript, and React Native application.\n\nNote that some Enterprise features will be merged to the OSS version too.\n\nIf you are interested in those features, please send an email to: ketsume0211@gmail.com\n\n# Hire me\n\nI'm a freelance software engineer specialized in React, React Native and TypeScript. Also available for GraphQL and RDB backend, and Node.JS applications.\n\nIf you are interested in hiring me, please send an email to: ketsume0211@gmail.com\n\nI'm based in Japan (by the beautiful sea), so a remote contract job is especially welcome.\n","readmeFilename":"README.md","_rev":"1-e1672123cd5ebf03b55eab1ef1257489"}