### Install and Build react-native-big-calendar with Bun

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/CONTRIBUTING.md

Installs project dependencies, runs post-installation scripts, and builds the project using Bun. This is the initial setup step for development.

```shell
bun install
bun run postinstall
```

```shell
bun run build
```

```shell
bun run test
```

--------------------------------

### Setting up Development Environment for React Native Big Calendar

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This section outlines the steps required to set up the development environment for contributing to or running the demo of react-native-big-calendar. It includes commands for installing dependencies using `bun` and starting the development server for the Expo demo.

```sh
bun install
bun sync-demo
cd expo-demo
bun install

cd expo-demo
bun start

# In the root directory, after modifying library code:
bun sync-demo
```

--------------------------------

### Install react-native-web for Web Usage

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Installs the react-native-web package, which is necessary for using react-native-big-calendar on web platforms. This enables cross-platform compatibility.

```bash
npm install react-native-web
```

--------------------------------

### Internationalization (I18n) Setup for React Native Big Calendar

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This example shows how to configure the calendar for different languages using the `locale` prop and importing the corresponding day.js locale file. It demonstrates setting the locale to Japanese ('ja') and provides a link to the day.js locale repository for other available language files.

```typescript
import 'dayjs/locale/ja'

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

--------------------------------

### Install react-native-big-calendar using npm

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Installs the 'next' beta version of react-native-big-calendar using npm. This version includes swipe animations. For a stable release, use 'react-native-big-calendar' without '@next'.

```bash
npm install --save react-native-big-calendar@next
```

--------------------------------

### Install Peer Dependencies for react-native-big-calendar

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Installs essential peer dependencies required for react-native-big-calendar to function correctly. These include React, React Native, and gesture handler libraries.

```bash
npm install react react-native react-native-gesture-handler react-native-infinite-pager react-native-reanimated
```

--------------------------------

### Install react-native-big-calendar using Yarn

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Installs the 'next' beta version of react-native-big-calendar using Yarn. This version includes swipe animations. For a stable release, use 'react-native-big-calendar' without '@next'.

```bash
yarn add react-native-big-calendar@next
```

--------------------------------

### Install TypeScript Types for React and React Native

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Installs development dependencies for TypeScript types, ensuring proper type checking for React and React Native when using TypeScript with react-native-big-calendar.

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

--------------------------------

### Format All-Day Event

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Demonstrates the correct format for all-day events. All-day events must have their start and end times set to 00:00:00 on the respective dates. This ensures the calendar correctly identifies and displays them.

```typescript
{
    title: 'all day event',
    start: "2021-12-24T00:00:00.000Z",
    end: "2021-12-24T00:00:00.000Z", // same date as `start`
}
```

--------------------------------

### Apply Custom Theme to Calendar using Theme Prop

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

This example shows how to deeply customize the appearance of the `react-native-big-calendar` using the `theme` prop. The theme object allows modification of colors, typography, and event overlapping styles, inspired by Material UI. The `PartialTheme` type should be used for defining the theme object.

```tsx
import { Calendar, PartialTheme } from 'react-native-big-calendar'
import { View } from 'react-native'

function ThemedCalendar() {
  const darkTheme: PartialTheme = {
    palette: {
      primary: {
        main: '#6366f1',
        contrastText: '#ffffff',
      },
      nowIndicator: '#ef4444',
      gray: {
        '100': '#1f2937',
        '200': '#374151',
        '300': '#4b5563',
        '500': '#9ca3af',
        '800': '#e5e7eb',
      },
      moreLabel: '#d1d5db',
    },
    typography: {
      fontFamily: 'System',
      xs: { fontSize: 10 },
      sm: { fontSize: 12 },
      xl: { fontSize: 22, fontWeight: 'bold' },
      moreLabel: { fontSize: 11, fontWeight: 'bold' },
    },
    eventCellOverlappings: [
      { main: '#8b5cf6', contrastText: '#fff' },
      { main: '#ec4899', contrastText: '#fff' },
      { main: '#14b8a6', contrastText: '#fff' },
    ],
    isRTL: false,
  }

  const events = [
    {
      title: 'Dark Theme Event',
      start: new Date(2024, 5, 15, 10, 0),
      end: new Date(2024, 5, 15, 12, 0),
    },
  ]

  return (
    <View style={{ backgroundColor: '#111827', flex: 1 }}>
      <Calendar
        events={events}
        height={600}
        theme={darkTheme}
      />
    </View>
  )
}
```

--------------------------------

### Customizing Calendar Theme with React Native Big Calendar

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This section explains how to customize the appearance of the calendar using the `theme` prop. It defines the structure of the `ThemeInterface`, including `palette` and `typography` options, and provides an example of a `darkTheme` object. The `theme` prop accepts an object conforming to this interface to alter colors and text styles.

```typescript
export interface Palette {
  main: string
  contrastText: string
}

export type Typography = Pick<
  TextStyle,
  |
    'fontFamily' |
    'fontWeight' |
    'fontSize' |
    'lineHeight' |
    'letterSpacing' |
    'textAlign'
>

export interface ThemeInterface {
  palette: {
    primary: Palette
    nowIndicator: string
    gray: {
      100: string
      200: string
      300: string
      500: string
      800: string
    }
    moreLabel: string
  }
  isRTL: boolean
  typography: {
    fontFamily?: string
    xs: Typography
    sm: Typography
    xl: Typography
    moreLabel: Typography
  }
  eventCellOverlappings: readonly Palette[]
  moreLabel: TextStyle
}

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}
/>
```

--------------------------------

### Configure Month View in react-native-big-calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Configure the month view of the calendar using props like `showAdjacentMonths`, `showSixWeeks`, `maxVisibleEventCount`, and `moreLabel`. This example demonstrates how to set these properties to control the display of events and the overall month layout. It also includes a handler for when the 'more' label is pressed.

```tsx
import { Calendar, ICalendarEventBase } from 'react-native-big-calendar'
import dayjs from 'dayjs'

function MonthViewCalendar() {
  const events: ICalendarEventBase[] = [
    // Multiple events on the same day to demonstrate overflow
    { title: 'Event 1', start: dayjs().toDate(), end: dayjs().add(1, 'hour').toDate() },
    { title: 'Event 2', start: dayjs().toDate(), end: dayjs().add(1, 'hour').toDate() },
    { title: 'Event 3', start: dayjs().toDate(), end: dayjs().add(1, 'hour').toDate() },
    { title: 'Event 4', start: dayjs().toDate(), end: dayjs().add(1, 'hour').toDate() },
    { title: 'Event 5', start: dayjs().toDate(), end: dayjs().add(1, 'hour').toDate() },
  ]

  const handleMorePress = (events: ICalendarEventBase[]) => {
    console.log('More events:', events.map(e => e.title))
  }

  return (
    <Calendar
      events={events}
      height={600}
      mode="month"
      showAdjacentMonths={true}
      showSixWeeks={true}
      maxVisibleEventCount={3}
      moreLabel="{moreCount} more"
      onPressMoreLabel={handleMorePress}
      sortedMonthView={true}
    />
  )
}
```

--------------------------------

### Display All-Day Events in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Demonstrates how to display all-day events in react-native-big-calendar. All-day events are identified by start and end times set to midnight (00:00:00). These events appear in a separate header section above the main time grid. The example utilizes the `showAllDayEventCell` prop to enable this feature and `allDayEventCellStyle` for customization.

```tsx
import { Calendar } from 'react-native-big-calendar'
import dayjs from 'dayjs'

function AllDayEventsCalendar() {
  const monday = dayjs().day(1)

  const events = [
    // Single day all-day event
    {
      title: 'Holiday',
      start: monday.set('hour', 0).set('minute', 0).toDate(),
      end: monday.set('hour', 0).set('minute', 0).toDate(),
    },
    // Multi-day all-day event
    {
      title: 'Company Retreat',
      start: monday.set('hour', 0).set('minute', 0).toDate(),
      end: monday.add(3, 'day').set('hour', 0).set('minute', 0).toDate(),
    },
    // Regular timed event
    {
      title: 'Morning Meeting',
      start: monday.set('hour', 9).set('minute', 0).toDate(),
      end: monday.set('hour', 10).set('minute', 0).toDate(),
    },
  ]

  return (
    <Calendar
      events={events}
      height={600}
      weekStartsOn={1}
      showAllDayEventCell={true}
      allDayEventCellStyle={{ backgroundColor: '#4caf50' }}
      allDayEventCellTextColor="#ffffff"
    />
  )
}

```

--------------------------------

### Configure Right-to-Left (RTL) Support for Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

This example demonstrates how to enable right-to-left (RTL) layout for the calendar, which is essential for languages like Hebrew or Arabic. It involves setting the `isRTL` prop to `true` and specifying the correct locale using the `locale` prop. Make sure the corresponding dayjs locale is imported.

```tsx
import 'dayjs/locale/he'
import { Calendar } from 'react-native-big-calendar'

function RTLCalendar() {
  const events = [
    {
      title: 'פגישת צוות',
      start: new Date(2024, 5, 15, 10, 0),
      end: new Date(2024, 5, 15, 11, 0),
    },
  ]

  return (
    <Calendar
      events={events}
      height={600}
      locale="he"
      isRTL={true}
    />
  )
}
```

--------------------------------

### Enable Calendar Localization with Locale Prop and Dayjs

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

This code illustrates how to internationalize the calendar by setting the `locale` prop and importing the corresponding dayjs locale files. This changes day and month names, as well as date formatting according to the selected language. Ensure you have the necessary dayjs locale packages installed.

```tsx
import 'dayjs/locale/ja'
import 'dayjs/locale/de'
import 'dayjs/locale/fr'
import { Calendar } from 'react-native-big-calendar'
import { useState } from 'react'

function LocalizedCalendar() {
  const [locale, setLocale] = useState('en')

  const events = [
    {
      title: 'International Meeting',
      start: new Date(2024, 5, 15, 10, 0),
      end: new Date(2024, 5, 15, 11, 0),
    },
  ]

  return (
    <>
      <View style={{ flexDirection: 'row' }}>
        <Button title="English" onPress={() => setLocale('en')} />
        <Button title="Japanese" onPress={() => setLocale('ja')} />
        <Button title="German" onPress={() => setLocale('de')} />
        <Button title="French" onPress={() => setLocale('fr')} />
      </View>

      <Calendar
        events={events}
        height={600}
        locale={locale}
      />
    </>
  )
}
```

--------------------------------

### Define Base Calendar Event Interface

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Defines the base interface for calendar events. It includes essential properties like start date, end date, title, and optional children or a disabled flag. This interface serves as a foundation for more specific event types.

```typescript
interface ICalendarEventBase {
  start: Date
  end: Date
  title: string
  children?: ReactElement | null
  disabled?: boolean
}
```

--------------------------------

### Optimize Performance with Enriched Events in react-native-big-calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Improve rendering performance for large datasets by using the `enrichEvents` feature. This involves pre-computing event positioning to avoid repeated calculations during rendering. The example shows how to generate a large number of events, sort them, and then enrich them for optimized display.

```tsx
import { Calendar, ICalendarEventBase, enrichEvents } from 'react-native-big-calendar'
import { useMemo } from 'react'

function OptimizedCalendar() {
  const events: ICalendarEventBase[] = useMemo(() => {
    // Generate large number of events
    return Array.from({ length: 100 }, (_, i) => ({
      title: `Event ${i + 1}`,
      start: new Date(2024, 5, Math.floor(i / 5) + 1, 9 + (i % 8), 0),
      end: new Date(2024, 5, Math.floor(i / 5) + 1, 10 + (i % 8), 0),
    }))
  }, [])

  // Pre-sort events by start time
  const sortedEvents = useMemo(() => {
    return [...events].sort((a, b) => a.start.getTime() - b.start.getTime())
  }, [events])

  // Pre-compute enriched events dictionary
  const enrichedEventsByDate = useMemo(() => {
    return enrichEvents(sortedEvents, true)
  }, [sortedEvents])

  return (
    <Calendar
      events={sortedEvents}
      height={600}
      enableEnrichedEvents={true}
      enrichedEventsByDate={enrichedEventsByDate}
      eventsAreSorted={true}
      isEventOrderingEnabled={true}
    />
  )
}
```

--------------------------------

### Display Week Numbers in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Show ISO week numbers in the calendar view by setting the `showWeekNumber` prop to `true`. Customize the prefix displayed before the week number using the `weekNumberPrefix` prop. This example configures the calendar to display week numbers with a 'W' prefix in week mode.

```tsx
import { Calendar } from 'react-native-big-calendar'

function WeekNumberCalendar() {
  const events = [
    {
      title: 'Weekly Planning',
      start: new Date(2024, 5, 15, 9, 0),
      end: new Date(2024, 5, 15, 10, 0),
    },
  ]

  return (
    <Calendar
      events={events}
      height={600}
      mode="week"
      showWeekNumber={true}
      weekNumberPrefix="W"
    />
  )
}
```

--------------------------------

### Handle User Interactions with Event Callbacks in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

The calendar component offers several callback props for handling user interactions such as tapping on events (`onPressEvent`), cells (`onPressCell`), long-pressing cells (`onLongPressCell`), tapping date headers (`onPressDateHeader`), date range changes (`onChangeDate`), and swipe gestures (`onSwipeEnd`). This example shows how to implement these callbacks for event display, creation, and navigation.

```tsx
import { Calendar, ICalendarEventBase } from 'react-native-big-calendar'
import { Alert } from 'react-native'
import { useState } from 'react'

function InteractiveCalendar() {
  const [events, setEvents] = useState<ICalendarEventBase[]>([
    {
      title: 'Existing Event',
      start: new Date(2024, 5, 15, 10, 0),
      end: new Date(2024, 5, 15, 11, 0),
    },
  ])

  const handlePressEvent = (event: ICalendarEventBase) => {
    Alert.alert('Event Details', `Title: ${event.title}\nStart: ${event.start}`)
  }

  const handlePressCell = (date: Date) => {
    // Create new event when cell is pressed
    const newEvent: ICalendarEventBase = {
      title: 'New Event',
      start: date,
      end: new Date(date.getTime() + 60 * 60 * 1000), // 1 hour later
    }
    setEvents([...events, newEvent])
  }

  const handleLongPressCell = (date: Date) => {
    Alert.alert('Long Press', `Create event at ${date.toLocaleString()}?`)
  }

  const handleDateHeaderPress = (date: Date) => {
    console.log('Header date pressed:', date)
  }

  const handleDateRangeChange = ([start, end]: [Date, Date]) => {
    console.log('Visible range:', start, 'to', end)
  }

  const handleSwipeEnd = (date: Date) => {
    console.log('Swiped to date:', date)
  }

  return (
    <Calendar
      events={events}
      height={600}
      onPressEvent={handlePressEvent}
      onPressCell={handlePressCell}
      onLongPressCell={handleLongPressCell}
      onPressDateHeader={handleDateHeaderPress}
      onChangeDate={handleDateRangeChange}
      onSwipeEnd={handleSwipeEnd}
    />
  )
}
```

--------------------------------

### Implement Controlled Date Navigation in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Manage calendar navigation programmatically using the `date` prop. Disable default swipe gestures with `swipeEnabled={false}` to allow custom navigation controls. This example uses `dayjs` for date manipulation and provides buttons to navigate between weeks and return to the current day.

```tsx
import { Calendar } from 'react-native-big-calendar'
import { View, Button } from 'react-native'
import { useState, useCallback } from 'react'
import dayjs from 'dayjs'

function ControlledCalendar() {
  const [currentDate, setCurrentDate] = useState(dayjs())

  const goToPrevWeek = useCallback(() => {
    setCurrentDate(currentDate.subtract(1, 'week'))
  }, [currentDate])

  const goToNextWeek = useCallback(() => {
    setCurrentDate(currentDate.add(1, 'week'))
  }, [currentDate])

  const goToToday = useCallback(() => {
    setCurrentDate(dayjs())
  }, [])

  const events = [
    {
      title: 'Weekly Meeting',
      start: currentDate.set('hour', 10).toDate(),
      end: currentDate.set('hour', 11).toDate(),
    },
  ]

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 10 }}>
        <Button title="< Prev" onPress={goToPrevWeek} />
        <Button title="Today" onPress={goToToday} />
        <Button title="Next >" onPress={goToNextWeek} />
      </View>

      <Calendar
        events={events}
        height={500}
        date={currentDate.toDate()}
        swipeEnabled={false}
      />
    </View>
  )
}
```

--------------------------------

### Display Custom Content in Calendar Events using Children Prop

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

This snippet demonstrates how to use the `children` prop within calendar events to display custom React elements. This allows for richer event information, such as notes or icons, directly within the event cell. Ensure that the `react-native-big-calendar` and `dayjs` libraries are installed.

```tsx
import { Calendar, ICalendarEventBase } from 'react-native-big-calendar'
import { View, Text } from 'react-native'
import dayjs from 'dayjs'

function EventWithChildrenCalendar() {
  const eventNotes = (
    <View style={{ marginTop: 4 }}>
      <Text style={{ fontSize: 10, color: 'white' }}>
        Phone: 555-123-4567
      </Text>
      <Text style={{ fontSize: 10, color: 'white' }}>
        Arrive 15 min early
      </Text>
    </View>
  )

  const events: ICalendarEventBase[] = [
    {
      title: "Doctor's Appointment",
      start: dayjs().set('hour', 14).set('minute', 0).toDate(),
      end: dayjs().set('hour', 15).set('minute', 30).toDate(),
      children: eventNotes,
    },
    {
      title: 'Quick Call',
      start: dayjs().set('hour', 16).set('minute', 0).toDate(),
      end: dayjs().set('hour', 16).set('minute', 30).toDate(),
      // Short events may not show children due to space constraints
    },
  ]

  return (
    <Calendar
      events={events}
      height={600}
    />
  )
}
```

--------------------------------

### Calendar Styling and Display Props

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This section covers props related to the visual appearance and display behavior of the calendar, such as hour styling, showing all-day events, and month view configurations.

```APIDOC
## Calendar Styling and Display Props

### Description
Props that control the visual styling and display behavior of the calendar component.

### Method
N/A (Component Props)

### Endpoint
N/A (Component Props)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (N/A)
- **hourStyle** (object) - Calendar body hours styling. Accepts a style object.
- **showAllDayEventCell** (boolean) - Boolean for showing/hiding the all day event cell.
- **moreLabel** (string) - String to replace More label in month view. Default: '{moreCount} More'.
- **showAdjacentMonths** (boolean) - Boolean for showing/hiding adjacent months in month view. Defaults to true.
- **sortedMonthView** (boolean) - Boolean for sorting events in month view. Defaults to true.
- **isEventOrderingEnabled** (boolean) - Boolean for sorting events in all view. Defaults to true.
- **renderCustomDateForMonth** (boolean) - Custom renderer for Date Cell.
- **disableMonthEventCellPress** (boolean) - Prevent Month view event cells from being pressed. Defaults to false.

#### Response Example
N/A
```

--------------------------------

### Initial Date

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Sets the initial date displayed by the calendar component.

```APIDOC
## `date`

### Description
Initial date of the calendar. Defaults to the current date and time.

### Method
N/A (Component Prop)

### Endpoint
N/A (Component Prop)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **`date`** (Date) - Optional - The initial date to display in the calendar.

### Request Example
```json
{
  "date": "2023-10-26T10:00:00.000Z"
}
```

### Response
#### Success Response (200)
N/A (Component Prop)

#### Response Example
N/A (Component Prop)
```

--------------------------------

### Configure Time Format and Hour Range in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Set 12/24 hour format using the `ampm` prop and limit visible hours with `minHour` and `maxHour`. The `scrollOffsetMinutes` prop allows auto-scrolling to a specific time. This example demonstrates setting a business hours view.

```tsx
import { Calendar } from 'react-native-big-calendar'

function BusinessHoursCalendar() {
  const events = [
    {
      title: 'Morning Standup',
      start: new Date(2024, 5, 15, 9, 0),
      end: new Date(2024, 5, 15, 9, 30),
    },
    {
      title: 'End of Day Review',
      start: new Date(2024, 5, 15, 17, 0),
      end: new Date(2024, 5, 15, 17, 30),
    },
  ]

  return (
    <Calendar
      events={events}
      height={600}
      ampm={true}                    // 12-hour format
      minHour={8}                    // Start at 8 AM
      maxHour={18}                   // End at 6 PM
      scrollOffsetMinutes={540}      // Auto-scroll to 9 AM (9 * 60)
    />
  )
}
```

--------------------------------

### Basic Calendar Usage with React Native and TypeScript

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Demonstrates how to integrate the Calendar component from react-native-big-calendar into a React Native application. It requires wrapping the Calendar in a GestureHandlerRootView and passing an array of events.

```typescript
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { Calendar } from 'react-native-big-calendar'

const events = [
  {
    title: 'Meeting',
    start: new Date(2020, 1, 11, 10, 0),
    end: new Date(2020, 1, 11, 10, 30),
  },
  {
    title: 'Coffee break',
    start: new Date(2020, 1, 11, 15, 45),
    end: new Date(2020, 1, 11, 16, 30),
  },
]

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Calendar events={events} height={600} />
    </GestureHandlerRootView>
  )
}
```

--------------------------------

### Calendar Customization Props

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This section outlines the props used to customize the appearance and behavior of the calendar, such as event indentation, RTL support, custom renderers, and event height.

```APIDOC
## Calendar Customization Props

### Description
These props allow for extensive customization of the calendar's display and functionality.

### Method
N/A (These are component props)

### Endpoint
N/A (Component Props)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Props
- **overlapOffset** (number) - Optional - Adjusts the indentation of events that occur during the same time period. Defaults to 20 on web and 8 on mobile.
- **isRTL** (boolean) - Optional - Switches the direction of the layout for use with RTL languages. Defaults to false.
- **renderEvent** (EventRenderer) - Optional - Custom event renderer. See the type definition below.
- **renderHeader** (HeaderRenderer) - Optional - Custom header renderer.
- **eventMinHeightForMonthView** (number) - Optional - Minimum height for events in month view. Should match the min-height of your custom events. Defaults to 22.
- **activeDate** (Date) - Optional - Date highlighted in header. Defaults to today (current time).
- **headerComponent** (ReactElement) - Optional - Calendar body header component.
- **headerComponentStyle** (ViewStyle) - Optional - Calendar body header component wrapper styling. Accepts a style object (static).
```

--------------------------------

### Day Header Style

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Customize the visual style of the day numbers displayed in the calendar header.

```APIDOC
## `dayHeaderStyle`

### Description
The style of the Header's day numbers. Accepts a style object.

### Method
N/A (Component Prop)

### Endpoint
N/A (Component Prop)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **`dayHeaderStyle`** (ViewStyle) - Optional - The style object for the day numbers in the header.

### Request Example
```json
{
  "dayHeaderStyle": {
    "color": "#333",
    "fontWeight": "bold"
  }
}
```

### Response
#### Success Response (200)
N/A (Component Prop)

#### Response Example
N/A (Component Prop)
```

--------------------------------

### Implement Custom Event Rendering in React Native

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Shows how to implement a custom event rendering function in React Native. The `renderEvent` function receives event details and touchable opacity props, and must return a React element wrapped in a touchable component. This allows for fully customized event display and interaction.

```typescript
export interface MyCustomEventType {
  color: string
}

const renderEvent = <T extends ICalendarEventBase>(
  event: T,
  touchableOpacityProps: CalendarTouchableOpacityProps,
) => (
  <TouchableOpacity {...touchableOpacityProps}>
    <Text>{`My custom event: ${event.title} with a color: ${event.color}`}</Text>
  </TouchableOpacity>
)

<Calendar renderEvent={renderEvent} />
```

--------------------------------

### Header Container Accessibility Props

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Allows setting accessibility properties for the entire header container, enabling it to be treated as a single accessible element for screen readers.

```APIDOC
## `headerContainerAccessibilityProps`

### Description
Accessibility properties for the Header container. Use this to control screen readers to identify the entire Header row as a single accessible element.

### Method
N/A (Component Prop)

### Endpoint
N/A (Component Prop)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **`headerContainerAccessibilityProps`** (AccessibilityProps) - Optional - Accessibility properties for the Header container.

### Request Example
```json
{
  "headerContainerAccessibilityProps": {
    "accessibilityLabel": "Calendar Header"
  }
}
```

### Response
#### Success Response (200)
N/A (Component Prop)

#### Response Example
N/A (Component Prop)
```

--------------------------------

### Calendar Component Props

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This section details the various props available for customizing the React Native Big Calendar component, including event handling, date navigation, and display preferences.

```APIDOC
## Calendar Component Props

### Description
Configuration options for the React Native Big Calendar component.

### Parameters
#### Query Parameters
- **hourRowHeight** (number) - Optional - Specifies the height of each hour row in the calendar view.
- **onPressEvent** ((event: ICalendarEvent<T>) => void) - Optional - Callback function triggered when an event is pressed.
- **onChangeDate** (([start: Date, end: Date]) => void) - Optional - Callback function triggered when the date range changes.
- **onPressCell** ((date: Date) => void) - Optional - Callback function triggered when a date cell is pressed (minute set to 0).
- **onLongPressCell** ((date: Date) => void) - Optional - Callback function triggered when a date cell is long-pressed.
- **onPressDateHeader** ((date: Date) => void) - Optional - Callback function triggered when a date in the header is pressed.
- **mode** ('month' | 'week' | '3days' | 'day' | 'schedule' | 'custom') - Optional - Sets the display mode of the calendar.
- **eventCellStyle** (ViewStyle | (event: ICalendarEvent<T>) => ViewStyle) - Optional - Defines the style for event cells, accepting static styles or dynamic functions.
```

--------------------------------

### Day Header Highlight Color

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Sets the color for highlighting the current day number in the calendar header.

```APIDOC
## `dayHeaderHighlightColor`

### Description
The style of the Header's highlighted day number. Accepts a color string.

### Method
N/A (Component Prop)

### Endpoint
N/A (Component Prop)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **`dayHeaderHighlightColor`** (string) - Optional - The color to highlight the current day number.

### Request Example
```json
{
  "dayHeaderHighlightColor": "blue"
}
```

### Response
#### Success Response (200)
N/A (Component Prop)

#### Response Example
N/A (Component Prop)
```

--------------------------------

### Week Day Header Highlight Color

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Defines the color used to highlight the current week day in the calendar header.

```APIDOC
## `weekDayHeaderHighlightColor`

### Description
The style of the Header's highlighted week day. Accepts a color string.

### Method
N/A (Component Prop)

### Endpoint
N/A (Component Prop)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **`weekDayHeaderHighlightColor`** (string) - Optional - The color to highlight the current week day.

### Request Example
```json
{
  "weekDayHeaderHighlightColor": "red"
}
```

### Response
#### Success Response (200)
N/A (Component Prop)

#### Response Example
N/A (Component Prop)
```

--------------------------------

### Render Calendar Component with Events and Handlers - React Native

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Demonstrates how to render the main Calendar component with predefined events and event handlers for press actions. It requires `react-native-gesture-handler` for gesture support and defines a custom event interface. The component can be configured with various props like `events`, `height`, `mode`, `onPressEvent`, and `onPressCell`.

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { Calendar, ICalendarEventBase } from 'react-native-big-calendar'

interface MyEvent extends ICalendarEventBase {
  color?: string
}

const events: MyEvent[] = [
  {
    title: 'Team Meeting',
    start: new Date(2024, 5, 15, 10, 0),
    end: new Date(2024, 5, 15, 11, 30),
    color: '#4285f4',
  },
  {
    title: 'Lunch Break',
    start: new Date(2024, 5, 15, 12, 0),
    end: new Date(2024, 5, 15, 13, 0),
  },
  {
    title: 'Project Review',
    start: new Date(2024, 5, 15, 14, 30),
    end: new Date(2024, 5, 15, 16, 0),
  },
]

function App() {
  const handlePressEvent = (event: MyEvent) => {
    console.log('Event pressed:', event.title)
  }

  const handlePressCell = (date: Date) => {
    console.log('Cell pressed:', date.toISOString())
  }

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Calendar
        events={events}
        height={600}
        mode="week"
        onPressEvent={handlePressEvent}
        onPressCell={handlePressCell}
      />
    </GestureHandlerRootView>
  )
}
```

--------------------------------

### Displaying Event Notes in React Native Big Calendar

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

This snippet demonstrates how to add custom notes or details to events in the calendar. It utilizes the `children` prop of an event to render additional `View` and `Text` components, allowing for rich content display within event cells. The `useMemo` hook is used for performance optimization of the event notes.

```typescript
const eventNotes = useMemo(
  () => (
    <View style={{ marginTop: 3 }}>
      <Text style={{ fontSize: 10, color: 'white' }}> Phone number: 555-123-4567 </Text>
      <Text style={{ fontSize: 10, color: 'white' }}> Arrive 15 minutes early </Text>
    </View>
  ),
  [],
)

export const myEvents: ICalendarEventBase[] = [
  {
    title: 'Custom reminder',
    start: dayjs().set('hour', 16).set('minute', 0).toDate(),
    end: dayjs().set('hour', 17).set('minute', 0).toDate(),
    children: eventNotes,
  },
]
```

--------------------------------

### Display Events in Schedule Mode (React Native)

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Renders events in a list format grouped by date, suitable for agenda views. It uses the 'schedule' mode and allows custom styling for events and month separators. Dependencies include 'react-native-big-calendar' and 'dayjs'.

```tsx
import { Calendar, ICalendarEventBase } from 'react-native-big-calendar'
import dayjs from 'dayjs'

interface ScheduleEvent extends ICalendarEventBase {
  color?: string
}

function ScheduleCalendar() {
  const events: ScheduleEvent[] = [
    {
      title: 'Morning Yoga',
      start: dayjs().set('hour', 7).toDate(),
      end: dayjs().set('hour', 8).toDate(),
      color: '#10b981',
    },
    {
      title: 'Team Standup',
      start: dayjs().set('hour', 9).toDate(),
      end: dayjs().set('hour', 9).set('minute', 30).toDate(),
      color: '#3b82f6',
    },
    {
      title: 'Client Presentation',
      start: dayjs().add(1, 'day').set('hour', 14).toDate(),
      end: dayjs().add(1, 'day').set('hour', 16).toDate(),
      color: '#8b5cf6',
    },
  ]

  return (
    <Calendar
      events={events}
      height={600}
      mode="schedule"
      eventCellStyle={(event) => ({
        backgroundColor: event.color || '#6366f1',
      })}
      scheduleMonthSeparatorStyle={{
        color: '#6b7280',
        fontSize: 14,
        fontWeight: 'bold',
        paddingVertical: 8,
      }}
    />
  )
}
```

--------------------------------

### Define Custom Event Interface (React Native)

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Defines the `ICalendarEventBase` interface, which serves as the foundation for all calendar events. Developers can extend this interface to include custom properties like `id`, `color`, `location`, etc., for richer event data.

```tsx
import { ICalendarEventBase } from 'react-native-big-calendar'
import { ReactElement } from 'react'

// Base interface structure:
interface ICalendarEventBase {
  start: Date          // Event start date/time (required)
  end: Date            // Event end date/time (required)
  title: string        // Event title (required)
  children?: ReactElement | null  // Custom content inside event
  hideHours?: boolean  // Hide time display
  disabled?: boolean   // Disable event interactions
  overlapPosition?: number  // Position in overlapping stack (auto-calculated)
  overlapCount?: number     // Total overlapping events (auto-calculated)
}

// Example custom event type:
interface MyCalendarEvent extends ICalendarEventBase {
  id: string
  color: string
  location?: string
  attendees?: string[]
  isAllDay?: boolean
  reminder?: number
}

const myEvent: MyCalendarEvent = {
  id: 'evt-001',
  title: 'Product Launch',
  start: new Date(2024, 5, 15, 14, 0),
  end: new Date(2024, 5, 15, 16, 0),
  color: '#8b5cf6',
  location: 'Conference Room A',
  attendees: ['alice@example.com', 'bob@example.com'],
  reminder: 15,
}
```

--------------------------------

### Style Events Dynamically in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Shows how to apply dynamic styling to events in react-native-big-calendar using the `eventCellStyle` prop. This prop can accept a static style object or a function that returns styles based on event properties, allowing for conditional formatting like background colors or borders based on event data such as priority or a custom color field.

```tsx
import { Calendar, ICalendarEventBase } from 'react-native-big-calendar'
import { ViewStyle } from 'react-native'

interface ColoredEvent extends ICalendarEventBase {
  color?: string
  priority?: 'high' | 'medium' | 'low'
}

function StyledEventsCalendar() {
  const events: ColoredEvent[] = [
    {
      title: 'Urgent Meeting',
      start: new Date(2024, 5, 15, 10, 0),
      end: new Date(2024, 5, 15, 11, 0),
      priority: 'high',
      color: '#f44336',
    },
    {
      title: 'Regular Task',
      start: new Date(2024, 5, 15, 14, 0),
      end: new Date(2024, 5, 15, 15, 0),
      priority: 'medium',
    },
  ]

  // Dynamic styling based on event properties
  const getEventStyle = (event: ColoredEvent): ViewStyle => {
    if (event.color) {
      return { backgroundColor: event.color }
    }

    switch (event.priority) {
      case 'high':
        return { backgroundColor: '#f44336', borderLeftWidth: 4, borderLeftColor: '#b71c1c' }
      case 'medium':
        return { backgroundColor: '#ff9800' }
      case 'low':
        return { backgroundColor: '#4caf50' }
      default:
        return { backgroundColor: '#2196f3' }
    }
  }

  return (
    <Calendar
      events={events}
      height={600}
      eventCellStyle={getEventStyle}
      eventCellTextColor="#ffffff"
    />
  )
}

```

--------------------------------

### Header Cell Accessibility Props

Source: https://github.com/acro5piano/react-native-big-calendar/blob/main/README.md

Enables setting accessibility properties for individual header cells, enhancing screen reader navigation within the calendar header.

```APIDOC
## `headerCellAccessibilityProps`

### Description
Accessibility properties for Header cells. This allows for individual accessibility configuration of each day or week day header.

### Method
N/A (Component Prop)

### Endpoint
N/A (Component Prop)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
*   **`headerCellAccessibilityProps`** (AccessibilityProps) - Optional - Accessibility properties for each Header cell.

### Request Example
```json
{
  "headerCellAccessibilityProps": {
    "accessibilityLabel": "Monday, October 26"
  }
}
```

### Response
#### Success Response (200)
N/A (Component Prop)

#### Response Example
N/A (Component Prop)
```

--------------------------------

### Custom Event Rendering in React Native Big Calendar

Source: https://context7.com/acro5piano/react-native-big-calendar/llms.txt

Illustrates how to achieve complete control over event appearance in react-native-big-calendar using the `renderEvent` prop. This prop accepts a function that receives event data and touchable props, enabling custom layouts, text, and styling for each event, including conditional rendering of elements like attendee counts based on event duration.

```tsx
import { Calendar, ICalendarEventBase, CalendarTouchableOpacityProps } from 'react-native-big-calendar'
import { TouchableOpacity, Text, View, RecursiveArray, ViewStyle } from 'react-native'
import dayjs from 'dayjs'

interface CustomEvent extends ICalendarEventBase {
  color?: string
  attendees?: string[]
}

function CustomRendererCalendar() {
  const events: CustomEvent[] = [
    {
      title: 'Team Sync',
      start: new Date(2024, 5, 15, 10, 0),
      end: new Date(2024, 5, 15, 11, 30),
      color: '#6366f1',
      attendees: ['Alice', 'Bob', 'Charlie'],
    },
  ]

  const renderEvent = (
    event: CustomEvent,
    touchableOpacityProps: CalendarTouchableOpacityProps
  ) => {
    const duration = dayjs(event.end).diff(event.start, 'minute')

    return (
      <TouchableOpacity
        {...touchableOpacityProps}
        style={[ 
          ...(touchableOpacityProps.style as RecursiveArray<ViewStyle>),
          {
            backgroundColor: 'white',
            borderWidth: 1,
            borderColor: '#e5e7eb',
            borderLeftColor: event.color || '#6366f1',
            borderLeftWidth: 4,
            borderRadius: 6,
            padding: 4,
          },
        ]}
      >
        <Text style={{ fontWeight: 'bold', color: '#1f2937' }}>
          {event.title}
        </Text>
        <Text style={{ fontSize: 11, color: '#6b7280' }}>
          {dayjs(event.start).format('HH:mm')} - {dayjs(event.end).format('HH:mm')}
        </Text>
        {duration > 45 && event.attendees && (
          <Text style={{ fontSize: 10, color: '#9ca3af', marginTop: 2 }}>
            {event.attendees.length} attendees
          </Text>
        )}
      </TouchableOpacity>
    )
  }

  return (
    <Calendar
      events={events}
      height={600}
      renderEvent={renderEvent}
    />
  )
}

```