react-native-big-calendar

The library provides several props to optimize rendering performance, especially when dealing with large datasets:

• Event Sorting:
  • sortedMonthView: Set to true to sort events in month view (default).
  • isEventOrderingEnabled: Set to true to sort events in all views (default).
  • eventsAreSorted: If your events are already sorted, set this to true to skip the internal sorting process.
• Enriched Events:
  • enableEnrichedEvents: Set to true to enable the enriched events logic.
  • enrichedEventsByDate: Provide a pre-built dictionary of events indexed by date (Record<string, T[]>) to avoid the library building this dictionary internally.

The library uses an 'Enriched Events' logic to boost performance, especially for large datasets.

Data Structure

Events are cached in a dictionary keyed by date (YYYY-MM-DD). Each entry contains the event properties plus overlapPosition and overlapCount to handle layout efficiently.

Multi-day Events

Events spanning multiple days are internally split into separate events for each day:

• First day: Starts at the actual event start time and ends at midnight.
• Intermediate days: Starts at midnight and ends at midnight.
• Final day: Starts at midnight and ends at the actual event end time.

Manual Enrichment

If you want to perform heavy preprocessing (like building the dictionary) in a background job, you can pass the pre-calculated dictionary directly to the enrichedEventsByDate prop.

To launch your application on an iOS simulator, ensure Metro is running in a separate terminal, then execute the ios run command from the project root.

# using npm
npm run ios

# OR using Yarn
yarn ios

Install the package using npm or yarn. Note that this library requires react and react-native as peer dependencies.

npm install --save react-native-big-calendar
# or
yarn add react-native-big-calendar

# Ensure peer dependencies are installed
npm install react react-native

After modifying your code (e.g., in App.tsx), you can reload the app to apply changes without a full rebuild:

• Android: Press the <kbd>R</kbd> key twice or open the Developer Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd> on Windows/Linux or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> on macOS) and select "Reload".
• iOS: Press <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> inside the iOS Simulator.

To launch your application on an Android emulator or device, ensure Metro is running in a separate terminal, then execute the android run command from the project root.

# using npm
npm run android

# OR using Yarn
yarn android

To change the calendar locale, set the locale prop on the Calendar component. Important: You must also manually import the corresponding dayjs locale file for the changes to take effect.

import 'dayjs/locale/ja'

<Calendar
  locale="ja"
  {/* ... */}
/>

Before running your application, you must start Metro, the JavaScript bundler that ships with React Native. Run the start command from the root of your project in a dedicated terminal window.

# using npm
npm start

# OR using Yarn
yarn start

To run the rndemo project locally to see the library in action, follow these steps:

1. Install dependencies and sync:

   yarn install
   yarn sync-rndemo
   cd rndemo
   yarn install

2. Start the development server:

   cd rndemo
   yarn start

3. Run on a device/emulator (in a separate terminal):

   # For iOS
   pod install
   yarn ios
   
   # For Android
   yarn android

Note: If you modify the library code, you must run yarn sync-rndemo from the root directory to update the demo.

Since the library is written in TypeScript and uses React/React Native types internally, you must ensure @types/react and @types/react-native are installed in your development environment.

npm install --save-dev @types/react @types/react-native

To use the calendar on the Web, you must install react-native-web. If you are using Create React App, it should work out of the box after installation.

npm install react-native-web

Customize the visual appearance of the calendar using the theme prop. The theme object allows you to define a palette (including primary and gray scales), typography, and other styling properties like moreLabel and eventCellOverlappings.

const darkTheme = {
  palette: {
    primary: {
      main: '#6185d0',
      contrastText: '#000',
    },
    gray: {
      '100': '#333',
      '200': '#666',
      '300': '#888',
      '500': '#aaa',
      '800': '#ccc',
    },
  },
}

<Calendar
  height={SCREEN_HEIGHT}
  theme={darkTheme}
/>