### Run Examples

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/MAIN_INDEX.md

Instructions to run the included examples. Ensure you have npm installed and navigate to the project directory.

```bash
npm run examples
# Open http://localhost:3000/examples/index.html
```

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

### Minimum Setup for React Big Calendar

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/README.md

This snippet shows the essential imports and configuration needed to get started with React Big Calendar. Ensure you set the localizer before rendering the Calendar component.

```javascript
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';
import '@elationhealth/react-big-calendar/lib/css/react-big-calendar.css';

Calendar.setLocalizer(Calendar.momentLocalizer(moment));

<Calendar events={[...]} />
```

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

### Install React Big Calendar

Source: https://github.com/elationemr/react-big-calendar/blob/master/examples/Intro.md

Install the library using npm. Ensure you also include the provided CSS file.

```bash
npm i --save react-big-calendar
```

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

### Month Range Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Demonstrates how to get the date range for the month view using the `Month.range()` static method.

```javascript
const { start, end } = Month.range(new Date(), { culture: 'en' });
```

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

### Install React Big Calendar and Moment.js

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/00_START_HERE.md

Use npm to install the react-big-calendar package along with moment.js for date handling.

```bash
npm install @elationhealth/react-big-calendar moment
```

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

### onSelectSlot Callback Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

An example of how to implement the onSelectSlot callback function. It logs the selected time range to the console and optionally logs the entityKey if provided.

```javascript
const handleSelectSlot = ({ start, end, slots, entityKey }) => {
  console.log(`Selected from ${start.toLocaleTimeString()} to ${end.toLocaleTimeString()}`);
  if (entityKey) {
    console.log(`For entity: ${entityKey}`);
  }
};
```

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

### Install react-dnd Dependencies

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/DragAndDrop.md

Install the necessary react-dnd packages for drag and drop functionality. This includes the core library and the HTML5 backend.

```bash
npm install react-dnd react-dnd-html5-backend
```

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

### Basic Calendar Setup with Events

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/MAIN_INDEX.md

Set up a basic calendar component with sample events. Ensure you configure the localizer before rendering the calendar.

```javascript
import React from 'react';
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

// Configure localizer
Calendar.setLocalizer(Calendar.momentLocalizer(moment));

export function MyCalendar() {
  const events = [
    {
      title: 'Meeting',
      start: new Date(2026, 6, 5, 10, 0),
      end: new Date(2026, 6, 5, 11, 0)
    }
  ];

  return (
    <div style={{ height: 600 }}>
      <Calendar
        events={events}
        startAccessor="start"
        endAccessor="end"
      />
    </div>
  );
}
```

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

### Configuring a Localizer

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

Before using the Calendar, a localizer must be configured. This example shows how to set up the Moment.js localizer.

```APIDOC
## Setup Required

Before using the Calendar, a localizer must be configured:

```javascript
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';

Calendar.setLocalizer(Calendar.momentLocalizer(moment));
```
```

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

### Usage Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

Demonstrates how to import and set the momentLocalizer for use with react-big-calendar.

```APIDOC
### Usage

```javascript
import BigCalendar from '@elationhealth/react-big-calendar';
import moment from 'moment';

BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);
```
```

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

### Usage Example: React Big Calendar with Drag and Drop

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/DragAndDrop.md

This example demonstrates how to set up React Big Calendar with the drag and drop addon. It includes importing necessary components, setting up the localizer, creating a wrapped component, and handling event drops.

```javascript
import React, { useState } from 'react';
import Calendar from '@elationhealth/react-big-calendar';
import withDragAndDrop from '@elationhealth/react-big-calendar/lib/addons/dragAndDrop';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';

// Setup
Calendar.setLocalizer(Calendar.momentLocalizer(moment));

// Create wrapped component
const DragAndDropCalendar = withDragAndDrop(Calendar);

export function MyCalendar() {
  const [events, setEvents] = useState([
    {
      id: 1,
      title: 'Meeting',
      start: new Date(2026, 6, 5, 10, 0),
      end: new Date(2026, 6, 5, 11, 0)
    }
  ]);

  const handleEventDrop = ({ event, start, end }) => {
    setEvents(
      events.map(e =>
        e.id === event.id
          ? { ...e, start, end }
          : e
      )
    );
  };

  return (
    <div style={{ height: 600 }}>
      <DragAndDropCalendar
        events={events}
        onEventDrop={handleEventDrop}
        selectable={true}
        popup
      />
    </div>
  );
}
```

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

### Example Event Object

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

An example of a fully formed event object, demonstrating the use of standard properties and custom fields like id, location, type, and attendees.

```javascript
const event = {
  id: 1,
  title: 'Team Meeting',
  start: new Date(2026, 6, 5, 10, 0),
  end: new Date(2026, 6, 5, 11, 0),
  allDay: false,
  location: 'Conference Room A',
  type: 'meeting',
  attendees: ['alice@example.com', 'bob@example.com']
};
```

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

### React Big Calendar Usage Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Demonstrates how to set up and use the Calendar component with localizer, events, and state management for date and view. Ensure CSS is imported.

```javascript
import React, { useState } from 'react';
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

// Configure localizer
Calendar.setLocalizer(Calendar.momentLocalizer(moment));

export function MyCalendar() {
  const [date, setDate] = useState(new Date());
  const [view, setView] = useState('month');
  
  const events = [
    {
      id: 1,
      title: 'Meeting',
      start: new Date(2026, 6, 5, 10, 0),
      end: new Date(2026, 6, 5, 11, 0)
    }
  ];

  return (
    <div style={{ height: 600 }}>
      <Calendar
        localizer={Calendar.momentLocalizer(moment)}
        events={events}
        date={date}
        view={view}
        onNavigate={setDate}
        onView={setView}
        onSelectEvent={(event) => console.log('Selected:', event)}
        popup
        selectable
      />
    </div>
  );
}
```

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

### Peer Dependencies Imports

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Example imports for the required peer dependencies: React, Moment.js, or Globalize.

```javascript
import React from 'react';
import moment from 'moment';
import globalize from 'globalize';
```

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

### Event Data Structure Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/MAIN_INDEX.md

Define the structure for event objects, including title, start, end, and optional allDay properties. Custom properties can also be added.

```javascript
{
  title: 'Event Name',
  start: new Date(),
  end: new Date(),
  allDay: false,
  // ... any custom properties
}
```

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

### getViews()

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Gets the configured views as an object map where keys are view names and values are view components.

```APIDOC
## getViews()

### Description
Gets the configured views as an object map where keys are view names and values are view components.

### Returns
- object: Object mapping view names to React view components.
```

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

### Peer Dependencies Installation

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

These packages must be installed separately as peer dependencies for react-big-calendar to function correctly.

```bash
npm install react react-dom
npm install moment  # or globalize
```

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

### Custom Event Styling with EventPropGetter

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Example of implementing an `EventPropGetter` to dynamically apply styles and class names to calendar events based on their properties.

```javascript
const eventPropGetter = (event, start, end, isSelected) => {
  const style = {
    backgroundColor: event.type === 'meeting' ? '#3174ad' : '#f50057',
    color: 'white',
    opacity: 0.8,
    borderRadius: '4px'
  };
  
  const className = `custom-event ${event.type}`;
  
  return { style, className };
};

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

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

### Globalize.js Setup for Calendar Localization

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Configure the calendar to use Globalize.js for localization. This requires loading CLDR data and then setting the localizer.

```javascript
import globalize from 'globalize';
import 'cldr-data/main/en/ca-gregorian';
import 'cldr-data/main/es/ca-gregorian';
import 'cldr-data/supplemental/timeData';
import 'cldr-data/supplemental/weekData';

globalize.load('en', 'es');

Calendar.setLocalizer(Calendar.globalizeLocalizer(globalize));
```

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

### Moment.js Setup with Multiple Locales

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Set up Moment.js localization for the calendar, including importing specific locales like Spanish ('es') and German ('de').

```javascript
import moment from 'moment';
import 'moment/locale/es';  // For Spanish
import 'moment/locale/de';  // For German

Calendar.setLocalizer(Calendar.momentLocalizer(moment));
```

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

### Set Up Moment.js Localizer for React Big Calendar

Source: https://github.com/elationemr/react-big-calendar/blob/master/README.md

Configure react-big-calendar to use Moment.js for date formatting and localization. Ensure Moment.js is installed.

```javascript
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);
```

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

### Custom Event Wrapper Usage Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Components.md

Provide a custom `EventWrapper` component via the `components` prop to customize the rendering and interaction of events.

```javascript
class CustomEventWrapper extends React.Component {
  render() {
    const { event, children } = this.props;
    
    return (
      <div
        className={`custom-event ${event.type || ''}`}
        onClick={() => console.log('Event:', event)}
      >
        {children}
      </div>
    );
  }
}

<Calendar components={{ eventWrapper: CustomEventWrapper }} />
```

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

### Setup Moment.js Localizer for React Big Calendar

Source: https://github.com/elationemr/react-big-calendar/blob/master/examples/Intro.md

Configure the calendar to use Moment.js for date internationalization and localization. This setup must be done before using the calendar component.

```jsx
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
BigCalendar.momentLocalizer(moment); // or globalizeLocalizer

const MyCalendar = props => (
  <div>
    <BigCalendar
      events={myEventsList}
      startAccessor='startDate'
      endAccessor='endDate'
    />
  </div>
);
```

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

### String Form Accessor Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Demonstrates using a string as an accessor to directly retrieve a property from an event object.

```javascript
titleAccessor="title"  // Extracts event.title
```

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

### Globalize.js Localization Configuration

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/MAIN_INDEX.md

Configure the calendar to use Globalize.js for date and text localization. Ensure Globalize is installed and configured.

```javascript
Calendar.setLocalizer(Calendar.globalizeLocalizer(globalize));
```

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

### MultiView Calendar Configuration with Entities

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Example of how to configure the Calendar component for a 'multi' view, providing entities and event data. Ensure entityKeyAccessor and entityNameAccessor match the properties on your entity objects.

```jsx
const entities = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' }
];

const eventMap = {
  1: [/* Alice's events */],
  2: [/* Bob's events */]
};

<Calendar
  view="multi"
  entities={entities}
  eventMap={eventMap}
  entityKeyAccessor="id"
  entityNameAccessor="name"
/>
```

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

### Configure React Big Calendar with Globalize Localizer

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

This example demonstrates how to set up React Big Calendar to use the Globalize localizer. Ensure CLDR data is loaded before initializing the localizer.

```javascript
import BigCalendar from '@elationhealth/react-big-calendar';
import globalize from 'globalize';

// Load CLDR data first
require('cldr-data/main/en/ca-gregorian');
require('cldr-data/main/fr/ca-gregorian');
require('cldr-data/main/de/ca-gregorian');
require('cldr-data/supplemental/timeData');
require('cldr-data/supplemental/weekData');

globalize.load('en', 'fr', 'de');

BigCalendar.setLocalizer(
  BigCalendar.globalizeLocalizer(globalize)
);
```

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

### Get Configured Views

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Retrieves an object map of all configured views and their corresponding React components. This is helpful for inspecting or dynamically managing available views.

```javascript
getViews() -> object
```

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

### onSelectSlot Callback Signature

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Fired when a time slot is selected, requires the `selectable` prop. Provides slot information including start, end, and available slots.

```typescript
(slotInfo: {
  start: Date,
  end: Date,
  slots: Date[],
  entityKey?: string | number
}) => void
```

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

### Get Day Range

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Views.md

Returns the date range for a single day view, where both start and end dates are the same as the provided date.

```javascript
static range(date: Date) -> { start: Date, end: Date }
```

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

### Custom Formatting Function Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Illustrates the signature for a custom formatting function used in date/time specifications. This function accepts a Date object and optional culture and localizer arguments, returning a formatted string.

```typescript
(date: Date, culture?: string, localizer?: Localizer) -> string
```

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

### Get Week Range

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Views.md

Determines the start and end dates for the week view based on a given date and component props. The 'culture' prop may influence the first day of the week.

```javascript
static range(date: Date, props: object) -> { start: Date, end: Date }
```

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

### eventPropGetter

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Allows customization of event rendering through dynamic CSS classes and inline styles. It receives the event object, start and end dates, and selection state, returning an object with optional `className` and `style` properties.

```APIDOC
## eventPropGetter

### Description
Allows customization of event rendering through dynamic CSS classes and inline styles.

### Signature
```javascript
eventPropGetter(event: object, start: Date, end: Date, isSelected: boolean) -> { className?: string, style?: object }
```
```

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

### Import Day View Layout Utility

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the calculateDayViewLayout utility for internal use in arranging the day view.

```javascript
// Day view layout (internal)
import { calculateDayViewLayout } from '@elationhealth/react-big-calendar/lib/utils/dayViewLayout';
```

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

### dates.range(start, end, unit)

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Utilities.md

Returns an array of dates at the given interval between a start and end date, inclusive. Useful for generating sequences of dates.

```APIDOC
## dates.range(start, end, unit)

### Description
Returns an array of dates at the given interval between start and end (inclusive).

### Parameters
#### Path Parameters
- **start** (Date) - Required - Start date
- **end** (Date) - Required - End date (inclusive)
- **unit** (string) - Optional - Default: `'day'` - Interval unit

### Returns
Array of dates from start to end at the specified interval

### Example
```javascript
const hours = dates.range(
  new Date(2026, 6, 5, 9, 0),
  new Date(2026, 6, 5, 17, 0),
  'hours'
);
// Returns [9 AM, 10 AM, 11 AM, ..., 5 PM]
```
```

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

### Import Navigation Utility

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the moveDate utility for navigating between calendar dates.

```javascript
// Navigation
import moveDate from '@elationhealth/react-big-calendar/lib/utils/move';
```

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

### dates.ceil(date, unit)

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Utilities.md

Returns the start of the next unit if the given date is not already at the start of a unit. Useful for aligning dates to specific time boundaries.

```APIDOC
## dates.ceil(date, unit)

### Description
Returns the start of the next unit if date is not already at the start of a unit.

### Parameters
#### Path Parameters
- **date** (Date) - Required - The date to round up
- **unit** (string) - Required - Time unit: `'year'`, `'month'`, `'week'`, `'day'`, `'hours'`, `'minutes'`, `'seconds'`

### Returns
Start of the unit if date is mid-unit, otherwise the date itself

### Example
```javascript
dates.ceil(new Date(2026, 6, 15, 10, 30), 'hours');
// Returns July 15, 2026, 11:00 AM
```
```

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

### Basic React Big Calendar Usage

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/00_START_HERE.md

Demonstrates how to set up the calendar's localizer and render a basic calendar component with events. Ensure the CSS is imported for proper styling.

```javascript
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

// Required: Set up date formatting
Calendar.setLocalizer(Calendar.momentLocalizer(moment));

// Use it
function MyCalendar() {
  const events = [
    {
      title: 'Meeting',
      start: new Date(2026, 6, 5, 10, 0),
      end: new Date(2026, 6, 5, 11, 0)
    }
  ];
  
  return (
    <div style={{ height: 600 }}>
      <Calendar events={events} />
    </div>
  );
}
```

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

### Import View Label Utility

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the viewLabel utility for generating labels for different calendar views.

```javascript
// View label generation
import viewLabel from '@elationhealth/react-big-calendar/lib/utils/viewLabel';
```

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

### Configure Views with Array Syntax

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Use an array of strings to specify which built-in views to enable.

```javascript
views={['month', 'week', 'day']}
```

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

### Import Date Utilities

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the dates utility for date manipulation and calculations.

```javascript
// Date utilities
import dates from '@elationhealth/react-big-calendar/lib/utils/dates';
```

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

### getView()

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Gets the active view component based on the current view setting.

```APIDOC
## getView()

### Description
Gets the active view component based on the current view setting.

### Returns
- React.Component: The React component class for the current logical view.
```

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

### Configure Localizer

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

Set up the Moment.js localizer for the Calendar component. This must be done before rendering the calendar.

```javascript
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';

Calendar.setLocalizer(Calendar.momentLocalizer(moment));
```

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

### Main Stylesheet Import

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the main CSS file to apply the default styling to your calendar.

```APIDOC
## Main Stylesheet Import

### Description

Import this CSS file to apply the base styles for the calendar, including layout, view-specific styles, and responsive design.

### Usage

```javascript
import '@elationhealth/react-big-calendar/lib/css/react-big-calendar.css';
```
```

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

### Import Utility Constants

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import constants for views and navigation actions from the utility module.

```javascript
// Constants
import { views, navigate } from '@elationhealth/react-big-calendar/lib/utils/constants';
```

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

### getLogicalView()

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Gets the logical view name, resolving any view aliases configured via the `viewAliases` prop.

```APIDOC
## getLogicalView()

### Description
Gets the logical view name, resolving any view aliases configured via `viewAliases` prop.

### Returns
- string: The resolved view name (e.g., `'month'`, `'week'`, `'day'`, `'agenda'`, `'multi'`).
```

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

### Import Event Level Calculation Utilities

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import internal utilities for calculating and sorting events within a given range.

```javascript
// Event level calculations (internal)
import { inRange, sortEvents, segStyle } from '@elationhealth/react-big-calendar/lib/utils/eventLevels';
```

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

### Import Calendar Utilities

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/README.md

Import utility functions and constants for date navigation and view management. These are located in the utils directory.

```javascript
// Utilities
import { views, navigate } from 'react-big-calendar/lib/utils/constants';
import dates from 'react-big-calendar/lib/utils/dates';
```

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

### Basic Month View Configuration

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Configure a basic month view with events, popups, and selection enabled.

```javascript
<Calendar
  events={events}
  popup
  selectable
/>
```

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

### Import Daylight Savings Utility

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the getDayLightSavingsTransitions utility for handling daylight saving time adjustments internally.

```javascript
// Daylight savings handling (internal)
import { getDayLightSavingsTransitions } from '@elationhealth/react-big-calendar/lib/utils/daylightSavings';
```

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

### Custom Event Component with Prop Forwarding

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Components.md

Example of a custom event component that accepts and forwards additional props using the rest operator.

```javascript
const MyEvent = ({ event, title, ...rest }) => (
  <div className="my-event" {...rest}>
    {title}
  </div>
);
```

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

### Configure Views with Object Syntax

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Use an object to enable built-in views, disable them, or provide custom view components. Ensure custom views are correctly imported and defined.

```javascript
views={{
  month: true,        // Use built-in Month view
  week: false,        // Hide Week view
  day: CustomDayView, // Use custom Day view
  custom: CustomView  // Add custom view
}}
```

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

### Function Form Accessor Example

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Illustrates using a function as an accessor to perform custom logic for extracting or deriving a value from an event object.

```javascript
titleAccessor={event => event.eventName || 'Untitled'}
```

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

### Customizing Calendar Messages

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Provides an example of how to override default UI text strings by passing a custom messages object to the Calendar component.

```javascript
const messages = {
  today: 'Aujourd\'hui',
  week: 'Semaine',
  month: 'Mois',
  day: 'Jour',
  agenda: 'Agenda',
  previous: 'Précédent',
  next: 'Suivant',
  showMore: (total) => `+${total} autres`
};

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

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

### Import Localizers

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import localizer functions for date formatting, including momentLocalizer, globalizeLocalizer, and the direct localizer interface.

```javascript
import momentLocalizer from '@elationhealth/react-big-calendar/lib/localizers/moment';
import globalizeLocalizer from '@elationhealth/react-big-calendar/lib/localizers/globalize';

// Direct localizer interface (returns null function unless configured)
import localizer from '@elationhealth/react-big-calendar/lib/localizer';
```

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

### Import Date Range Selection Utility

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the inRange utility for internal use in date range selection logic.

```javascript
// Date range utilities (internal)
import inRange from '@elationhealth/react-big-calendar/lib/utils/selection';
```

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

### DateLocalizer Instance Properties

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

Instance properties available on a DateLocalizer object, providing access to formatting, parsing, and week start day functionalities.

```APIDOC
### Instance Properties

| Property | Type | Description |
|----------|------|-------------|
| format | function | Formats a date using the provided format string |
| parse | function | Parses a date string using the provided format |
| startOfWeek | function | Returns first day of week index for a culture |
| propType | PropTypes validator | Validator for locale prop values |
| formats | object | Default format strings |
```

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

### Import Helper Functions

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import various helper functions for common tasks like notifications, instance IDs, event filtering, and checking all-day events.

```javascript
// Helper functions
import {
  notify,
  instanceId,
  isAllDayEvent,
  makeEventOrAvailabilityFilter
} from '@elationhealth/react-big-calendar/lib/utils/helpers';
```

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

### DateRange Object

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Represents a date range with a start and end date. This object is returned by the `range()` static methods of views like Month.

```APIDOC
## DateRange Object

Represents a date range with start and end.

```javascript
interface DateRange {
  start: Date;
  end: Date;
}
```

Returned by view `range()` static methods:

```javascript
const { start, end } = Month.range(new Date(), { culture: 'en' });
```
```

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

### render()

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Renders the calendar with toolbar and the active view.

```APIDOC
## render()

### Description
Renders the calendar with toolbar and the active view.

### Returns
- React.ReactElement: JSX element containing toolbar (if enabled) and the current view component.

### Features
- Applies RTL class if `rtl` prop is true
- Passes view-specific component overrides
- Forwards all necessary props to view component
- Renders Toolbar component if `toolbar` prop is true
```

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

### DateRange Interface

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Defines the structure for a date range object, containing start and end dates. This is returned by view `range()` static methods.

```typescript
interface DateRange {
  start: Date;
  end: Date;
}
```

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

### Set Up Globalize.js Localizer for React Big Calendar

Source: https://github.com/elationemr/react-big-calendar/blob/master/README.md

Configure react-big-calendar to use Globalize.js for date formatting and localization. Ensure Globalize.js v0.1.1 is installed.

```javascript
import BigCalendar from 'react-big-calendar';
import globalize from 'globalize';

BigCalendar.setLocalizer(
  BigCalendar.globalizeLocalizer(globalize)
);
```

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

### Import Formats

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import default formats and the set function to customize date and time formatting in the calendar.

```javascript
import defaultFormats from '@elationhealth/react-big-calendar/lib/formats';
import { set as setFormats } from '@elationhealth/react-big-calendar/lib/formats';

// Get formats: defaultFormats(overrides) -> merged formats
const formats = defaultFormats({
  dateFormat: 'DD/MM/YYYY'
});
```

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

### Multi-language Support Configuration

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Implement multi-language support by providing the `culture` prop and a `messages` object containing translations for the current language.

```javascript
<Calendar
  events={events}
  culture={currentLanguage}
  messages={translations[currentLanguage]}
/>
```

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

### Memoize Custom Event Component

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Components.md

For large event lists, memoize custom components to improve performance. This example uses React.memo to prevent unnecessary re-renders.

```javascript
const MemoizedEvent = React.memo(({ event, title }) => (
  <div>{title}</div>
), (prevProps, nextProps) => {
  return prevProps.event.id === nextProps.event.id;
});

<Calendar components={{ event: MemoizedEvent }} />
```

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

### Event Prop Getter Callback

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Allows dynamic CSS classes and inline styles for event rendering. Accepts event, start, end, and isSelected arguments.

```javascript
eventPropGetter(event: object, start: Date, end: Date, isSelected: boolean) -> {
  className?: string,
  style?: object
}
```

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

### Customizing Availability Components

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Components.md

Define custom components for rendering availability blocks and their wrappers.

```javascript
components={{
  availability: CustomAvailability,
  availabilityWrapper: CustomAvailabilityWrapper
}}
```

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

### Get Visible Days in Month - JavaScript

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Utilities.md

Returns all days visible in the month grid, including days from adjacent months. Useful for rendering calendar views.

```javascript
visibleDays(date: Date, culture?: string) -> Date[]
```

```javascript
const dates = visibleDays(new Date(2026, 6, 1), 'en-US');
// Returns array including June 28 (from previous month) through August 2 (from next month)
```

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

### Instantiate DateLocalizer

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Create a new instance of `DateLocalizer` to customize date formatting, parsing, and the first day of the week. This is essential for internationalization.

```javascript
import { DateLocalizer } from '@elationhealth/react-big-calendar/lib/localizer';

const customLocalizer = new DateLocalizer({
  format: myFormat,
  parse: myParse,
  firstOfWeek: myFirstOfWeek
});
```

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

### Get Active View Component

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Returns the React component class for the currently active view. Use this to interact with or inspect the active view's component.

```javascript
getView() -> React.Component
```

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

### Get Logical View Name

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Retrieves the current logical view name, resolving any configured view aliases. Useful for understanding the active view in the calendar.

```javascript
getLogicalView() -> string
```

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

### Globalize.js Format Objects

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Illustrates how to use Globalize.js for date and time formatting. Supports predefined formats or raw CLDR patterns.

```javascript
{ date: 'short' }      // Short date format
{ time: 'short' }      // Short time format
{ datetime: 'short' }  // Short date and time
{ raw: 'MMM dd' }      // Raw CLDR pattern
```

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

### onNavigate Callback Signature

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Fired when the calendar date changes. Accepts date, view, and action as arguments.

```typescript
(date: Date, view: string, action: string) => void
```

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

### Create Date Range - JavaScript

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Utilities.md

Generates an array of dates at a specified interval between a start and end date (inclusive). Ideal for creating sequences of dates for display or processing.

```javascript
range(start: Date, end: Date, unit?: string) -> Date[]
```

```javascript
const hours = dates.range(
  new Date(2026, 6, 5, 9, 0),
  new Date(2026, 6, 5, 17, 0),
  'hours'
);
// Returns [9 AM, 10 AM, 11 AM, ..., 5 PM]
```

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

### Exported Localizer Interface

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

The default export provides three core methods for date formatting, parsing, and determining the start of the week, which delegate to the currently configured localizer.

```APIDOC
## Exported Localizer Interface

The default export provides three methods that delegate to the configured localizer:

```javascript
export default {
  format(...args) -> string,
  parse(...args) -> Date,
  startOfWeek(...args) -> number
}
```

**Throws:** Error if no localizer has been set via `set()`

**Source:** `src/localizer.js:65-79`
```

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

### Availability Data Structure

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Calendar.md

Availabilities passed via the `availabilities` prop follow this structure.

```javascript
{
  start: Date,
        // Start time (availabilityStartAccessor)
  end: Date,
          // End time (availabilityEndAccessor)
  // ... additional custom fields
}
```

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

### Import React

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import the React library, which is a peer dependency and required for all components. React version 16.0+ is necessary.

```javascript
import React from 'react';
```

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

### Controlled Component Integration

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/DragAndDrop.md

Integrate DragAndDropCalendar with a controlled React component. This example demonstrates managing event state, date, and view externally, and handling event drops to update the state.

```javascript
const [events, setEvents] = useState([...]);
const [date, setDate] = useState(new Date());
const [view, setView] = useState('month');

<DragAndDropCalendar
  events={events}
  date={date}
  view={view}
  onNavigate={setDate}
  onView={setView}
  onEventDrop={({ event, start, end }) => {
    setEvents(events.map(e =>
      e.id === event.id ? { ...e, start, end } : e
    ));
  }}
/>
```

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

### Moment Localizer Culture/Locale Support

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Localizers.md

Shows how to use different cultures or locales with the Moment.js localizer for formatting dates. Ensure the desired Moment.js locales are imported.

```javascript
localizer.format(new Date(), 'MMMM YYYY', 'fr'); // French: "juillet 2026"
localizer.format(new Date(), 'MMMM YYYY', 'de'); // German: "Juli 2026"

import 'moment/locale/fr';
import 'moment/locale/de';
```

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

### Complete Import Pattern for React Big Calendar

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

This snippet demonstrates a comprehensive import pattern for react-big-calendar, including the main component, drag-and-drop addon, moment localizer, constants, utilities, and necessary CSS. It shows how to configure the localizer and create a drag-and-drop enabled calendar instance.

```javascript
// Main component and helpers
import Calendar from '@elationhealth/react-big-calendar';
import moment from 'moment';
import withDragAndDrop from '@elationhealth/react-big-calendar/lib/addons/dragAndDrop';

// Constants
import { views, navigate } from '@elationhealth/react-big-calendar/lib/utils/constants';

// Utilities
import dates from '@elationhealth/react-big-calendar/lib/utils/dates';
import { accessor } from '@elationhealth/react-big-calendar/lib/utils/accessors';

// Styles
import '@elationhealth/react-big-calendar/lib/css/react-big-calendar.css';
import '@elationhealth/react-big-calendar/lib/addons/dragAndDrop/styles.css';

// Configure
Calendar.setLocalizer(Calendar.momentLocalizer(moment));

// Create drag-and-drop calendar
const DragAndDropCalendar = withDragAndDrop(Calendar);

// Use
export function MyApp() {
  return <DragAndDropCalendar events={events} />;
}
```

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

### Navigate Week View

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Views.md

Calculates the next, previous, or today's date for the week view. Use the static navigate method with the appropriate action.

```javascript
static navigate(date: Date, action: string) -> Date
```

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

### Ceil Date to Unit - JavaScript

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Utilities.md

Rounds a date up to the start of the next specified unit (year, month, week, day, hours, minutes, seconds). Useful for aligning dates to specific intervals.

```javascript
ceil(date: Date, unit: string) -> Date
```

```javascript
dates.ceil(new Date(2026, 6, 15, 10, 30), 'hours');
// Returns July 15, 2026, 11:00 AM
```

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

### EventDropInfo Interface Definition

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Defines the structure of the EventDropInfo object passed to the onEventDrop callback after a drag-and-drop operation. It includes the event being moved, its new start and end times, and details about the drop action.

```typescript
interface EventDropInfo {
  event: Event;
  start: Date;
  end: Date;
  resourceId?: string | number;
  isAllDay?: boolean;
  action: string;
}
```

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

### Configure View Aliases

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/configuration.md

Define aliases for views to simplify usage or create custom view names that map to existing ones. The 'view' prop then uses these aliases.

```javascript
views={['month', 'week', 'day']}
viewAliases={{
  'week-compact': 'week',
  'day-wide': 'day'
}}
view="week-compact"  // Maps to 'week' view internally
```

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

### Localizer Class Export

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Instantiate a custom localizer to handle date formatting, parsing, and first day of the week settings.

```APIDOC
## Localizer Class Export

### Description

This export allows you to create and configure a `DateLocalizer` instance. You can customize how dates are formatted, parsed, and define which day is considered the first day of the week.

### Usage

```javascript
import { DateLocalizer } from '@elationhealth/react-big-calendar/lib/localizer';

const customLocalizer = new DateLocalizer({
  format: myFormat,
  parse: myParse,
  firstOfWeek: myFirstOfWeek
});
```

### Constructor Parameters:

- `options` (Object):
  - `format` (Function): A function to format dates.
  - `parse` (Function): A function to parse dates.
  - `firstOfWeek` (Number): The index of the first day of the week (e.g., 0 for Sunday, 1 for Monday).
```

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

### Availability Object Interface Definition

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Defines the structure for an availability object, specifying standard properties for start and end times, which can be customized via accessors. It also allows for additional custom fields.

```typescript
interface Availability {
  [availabilityStartAccessor: string]: Date;
  [availabilityEndAccessor: string]: Date;
  // ... additional custom fields
}
```

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

### Import Message Utilities

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import message utilities for handling and setting localized messages.

```javascript
// Message utilities
import messages from '@elationhealth/react-big-calendar/lib/utils/messages';
import { set as setMessage } from '@elationhealth/react-big-calendar/lib/utils/messages';
```

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

### Calendar Range Method

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Views.md

The optional `range` static method returns the date range visible in the view, used for header formatting. It takes a date and optional props, returning an object with start and end dates.

```javascript
static range(date: Date, props?: object) -> { start: Date, end: Date }
```

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

### Availability Components

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Components.md

Customize the rendering of availability blocks and their wrappers.

```APIDOC
## Availability Components

For calendars displaying availabilities (open time slots):

```javascript
components={{
  availability: CustomAvailability,
  availabilityWrapper: CustomAvailabilityWrapper
}}
```

### availability Component

Custom rendering for individual availability blocks.

**Props:**

| Prop | Type | Description |
|------|------|-------------|
| availability | object | The availability data object |
| title | string | Formatted availability label |
| isAllDay | boolean | All-day availability |
```

```APIDOC
### availabilityWrapper Component

Wraps availability elements (similar to EventWrapper).
```

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

### SlotInfo Interface Definition

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Defines the structure of the SlotInfo object passed to the onSelectSlot callback. It includes start and end dates of the selected range, an array of all slots within that range, and an optional entityKey for multi-view scenarios.

```typescript
interface SlotInfo {
  start: Date;
  end: Date;
  slots: Date[];
  entityKey?: string | number;
}
```

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

### Import Wrapper Components

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/api-reference/Exports.md

Import pass-through wrapper components such as EventWrapper, BackgroundWrapper, and AvailabilityWrapper for extending calendar components.

```javascript
import EventWrapper from '@elationhealth/react-big-calendar/lib/EventWrapper';
import BackgroundWrapper from '@elationhealth/react-big-calendar/lib/BackgroundWrapper';
import AvailabilityWrapper from '@elationhealth/react-big-calendar/lib/AvailabilityWrapper';
```

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

### Event Object Interface Definition

Source: https://github.com/elationemr/react-big-calendar/blob/master/_autodocs/types.md

Defines the structure of an event object, including standard properties like title, start, end, and allDay, which can be customized via accessors. Additional custom fields can also be included.

```typescript
interface Event {
  [titleAccessor: string]: string | React.ReactNode;
  [startAccessor: string]: Date;
  [endAccessor: string]: Date;
  [allDayAccessor: string]: boolean;
  // ... additional custom fields
}
```