# Technical Documentation: wix/react-native-calendars

> ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/wix/react-native-calendars)

### Overview (`README.md`)

[](https://stand-with-ukraine.pp.ua)

# React Native Calendars 🗓️ 📆

## A declarative cross-platform React Native calendar component for iOS and Android.

[](https://www.npmjs.com/package/react-native-calendars)
[](https://buildkite.com/wix-mobile-oss/react-native-calendars)
<br>

This module includes information on how to use this customizable **React Native** calendar component.

The package is compatible with both **Android** and **iOS**

<br>

> ### **Official documentation**
>
> This README provides basic examples of how to get started with `react-native-calendars`. For detailed information, refer to the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro).

## Features ✨

- Pure JS. No Native code required
- Date marking - dot, multi-dot, period, multi-period and custom marking
- Customization of style, content (days, months, etc) and dates
- Detailed documentation and examples
- Swipeable calendar with flexible custom rendering
- Scrolling to today, selecting dates, and more
- Allowing or blocking certain dates
- Accessibility support
- Automatic date formatting for different locales

## Try it out ⚡

You can run a sample module using these steps:

```
$ git clone git@github.com:wix/react-native-calendars.git

$ cd react-native-calendars

$ yarn install

$ cd ios && pod install && cd ..

$ react-native run-ios
```

You can check example screens source code in [example module screens](https://github.com/wix-private/wix-react-native-calendar/tree/master/example/src/screens)

This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)

## Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

### Install the package:

```
$ yarn add react-native-calendars
```

**RN Calendars is implemented in JavaScript, so no native module linking is required.**

## Usage 🚀

Basic usage examples of the library

##### **For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro)**

### Importing the `Calendar` component

```javascript
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
```

### Use the `Calendar` component in your app:

```javascript
<Calendar
  onDayPress={day => {
    console.log('selected day', day);
  }}
/>
```

## Some Code Examples

Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:

### Creating a basic calendar with default settings:

```javascript
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;
```

### Customize the appearance of the calendar:

```javascript
<Calendar
  // Customize the appearance of the calendar
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify the current date
  current={'2012-03-01'}
  // Callback that gets called when the user selects a day
  onDayPress={day => {
    console.log('selected day', day);
  }}
  // Mark specific dates as marked
  markedDates={{
    '2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-03-02': {marked: true},
    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
  }}
/>
```

### Configuring the locale:

```javascript
import {LocaleConfig} from 'react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};

LocaleConfig.defaultLocale = 'fr';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;
```

### Adding a global theme to the calendar:

```javascript
    <Calendar
      style={{
        borderWidth: 1,
        borderColor: 'gray',
        height: 350,
      }}
      theme={{
        backgroundColor: '#ffffff',
        calendarBackground: '#ffffff',
        textSectionTitleColor: '#b6c1cd',
        selectedDayBackgroundColor: '#00adf5',
        selectedDayTextColor: '#ffffff',
        todayTextColor: '#00adf5',
        dayTextColor: '#2d4150',
        textDisabledColor: '#dd99ee'
      }}
    />
```

## Customized Calendar Examples

### Calendar

  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true">

### Dot marking

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">

### Multi-Dot marking

 <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true">

### Period Marking

  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true">

  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true">

### Multi-Period marking

  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true">

### Custom marking

  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true">

  <img height=350 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true">

### Date loading indicator

  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true">

### Scrollable semi-infinite calendar

  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar-list.gif?raw=true">

### Horizontal calendar

  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/horizontal-calendar-list.gif?raw=true">

### Agenda

  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/agenda.gif?raw=true">

<br>

## Authors

- [Tautvilas Mecinskas](https://github.com/tautvilas/) - Initial code - [@tautvilas](https://twitter.com/Tautvilas)
- Katrin Zotchev - Initial design - [@katrin_zot](https://twitter.com/katrin_zot)

See also the list of [contributors](https://github.com/wix/react-native-calendar-components/contributors) who participated in this project.

## Contributing

We welcome contributions to react-native-calendars.

If you have an idea for a new feature or have discovered a bug, please open an issue.

Please `yarn test` and `yarn lint` before pushing changes.

Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.

Screenshots and Gifs are VERY helpful to add to the PR for reviews.

Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.

## License

React Native Calendars is MIT licensed

---

### Overview (`docsRNC/README.md`)

# Website

This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.

### Installation

```
$ yarn
```

### Local Development

```
$ yarn start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

```
$ yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.

### Deployment

Using SSH:

```
$ USE_SSH=true yarn deploy
```

Not using SSH:

```
$ GIT_USER=<Your GitHub username> yarn deploy
```

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

---

### DocsRNC Docs Intro (`docsRNC/docs/intro.md`)

---
sidebar_position: 1
---

[](https://stand-with-ukraine.pp.ua)

# React Native Calendars 🗓️ 📆

## A declarative cross-platform React Native calendar component for iOS and Android.

[](https://www.npmjs.com/package/react-native-calendars)
[](https://travis-ci.org/wix/react-native-calendars)

<br/>

This module includes information on how to use this customizable **React Native** calendar component.

The package is compatible with both **Android** and **iOS**

<br/>

## Features ✨

- Pure JS. No Native code required
- Date marking - dot, multi-dot, period, multi-period and custom marking
- Customization of style, content (days, months, etc) and dates
- Detailed documentation and examples
- Swipeable calendar with flexible custom rendering
- Scrolling to today, selecting dates, and more
- Allowing or blocking certain dates
- Accessibility support
- Automatic date formatting for different locales

## Try it out ⚡

You can run a sample module using these steps:

```
$ git clone git@github.com:wix/react-native-calendars.git

$ cd react-native-calendars

$ npm install

$ cd ios && pod install && cd ..

$ react-native run-ios
```

You can check example screens source code in [example module screens](https://github.com/wix-private/wix-react-native-calendar/tree/master/example/src/screens)

This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)

## Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

### Install the package:

Using `npm`:

```
$ npm install --save react-native-calendars
```

Using `Yarn`:

```
$ yarn add react-native-calendars
```

**RN Calendars is implemented in JavaScript, so no native module linking is required.**

<br/>

## Usage Example

<br/>

`import {[Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda)} from 'react-native-calendars';`

All parameters for components are optional. By default the month of current local date will be displayed.

Event handler callbacks are called with `calendar objects` like this:

```javascript
{
  day: 1,      // day of month (1-31)
  month: 1,    // month of year (1-12)
  year: 2017,  // year
  timestamp,   // UTC timestamp representing 00:00 AM of this date
  dateString: '2016-05-13' // date formatted as 'YYYY-MM-DD' string
}
```

Parameters that require date types accept `YYYY-MM-DD` formatted `date-strings`, JavaScript date objects, `calendar objects` and `UTC timestamps`.

Calendars can be localized by adding custom locales to `LocaleConfig` object:

```javascript
import {LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};
LocaleConfig.defaultLocale = 'fr';
```

## Authors

- [Tautvilas Mecinskas](https://github.com/tautvilas/) - Initial code - [@tautvilas](https://twitter.com/Tautvilas)
- Katrin Zotchev - Initial design - [@katrin_zot](https://twitter.com/katrin_zot)

- [Inbal Tish](https://github.com/Inbal-Tish) - Main maintainer

See also the list of [contributors](https://github.com/wix/react-native-calendar-components/contributors) who participated in this project.

## Contributing

Pull requests are most welcome!
Please `npm run test` and `npm run lint` before push.
Don't forget to add a **title** and a **description** that explain the issue you're trying to solve and your suggested solution.
Screenshots and gifs are VERY helpful.
Please do NOT format the files as we are trying to keep a unified syntax and the reviewing process fast and simple.

## License

React Native Calendars is MIT licensed

---

### DocsRNC Docs Testing (`docsRNC/docs/testing.md`)

## Testing Calendars

Each component receives a testID as a prop and pass to internal elements by concatenating the testID with the element type/data.

For instance, The `Calendar` component will concatenate a given testID to each `Day` element it renders with its date.  
So each Day element's testID will be in the following format `${testID}.day_${date_string}`.

For example, if you'll pass to `Calendar` a testID called `myCalendar`, the day element representing the 2022-08-21 will have `myCalendar.day_2022-08-21` as testID.

Follow the components testIDs guidelines to learn how to query them in your tests

### Calendar

| Element        | Format                                | Example                                                  |
| -------------- | ------------------------------------- | -------------------------------------------------------- |
| Main Container | `${testID}`                           | `myCalendar`                                             |
| Day            | `${testID}.day_${date_string}`        | `myCalendar.day_2022-08-21`, `myCalendar.day_2022-07-15` |
| Header         | `${testID}.header`                    | `myCalendar.header`                                      |
| Week Numbers   | `${testID}.weekNumber_${weekNumber}`} | `myCalendar.weekNumber_27`                               |

### CalendarList

| Element        | Format                            | Example                       |
| -------------- | --------------------------------- | ----------------------------- |
| Main Container | `${testID}`                       | `myCalendarList`              |
| Calendar Item  | `${testID}.item_${year}-{month}`} | `myCalendarList.item_2022-07` |
| Static Header  | `${testID}.staticHeader`}         | `myCalendarList.staticHeader` |

### Header

| Element        | Format                 | Example                       |
| -------------- | ---------------------- | ----------------------------- |
| Main Container | `${testID}`            | `myCalendarHeader`            |
| Header Title   | `${testID}.title`      | `myCalendarHeader.title`      |
| Day Names      | `${testID}.dayNames`   | `myCalendarHeader.dayNames`   |
| Left Arrow     | `${testID}.leftArrow`  | `myCalendarHeader.leftArrow`  |
| Right Arrow    | `${testID}.rightArrow` | `myCalendarHeader.rightArrow` |
| Loader         | `${testID}.loader`     | `myCalendarHeader.loader`     |

### ExpandableCalendar

| Element              | Format                          | Example                                    |
| -------------------- | ------------------------------- | ------------------------------------------ |
| Main Container       | `${testID}`                     | `myExpandableCalendar`                     |
| Left Arrow           | `${testID}.leftArrow`           | `myExpandableCalendar.leftArrow`           |
| Right Arrow          | `${testID}.rightArrow`          | `myExpandableCalendar.rightArrow`          |
| Knob                 | `${testID}.knob`                | `myExpandableCalendar.knob`                |
| Expandable Container | `${testID}.expandableContainer` | `myExpandableCalendar.expandableContainer` |
| Week Calendar        | `${testID}.weekCalendar`        | `myExpandableCalendar.weekCalendar`        |
| Calendar List        | `${testID}.calendarList`        | `myExpandableCalendar.calendarList`        |

### WeekCalendar

| Element        | Format                         | Example                         |
| -------------- | ------------------------------ | ------------------------------- |
| Main Container | `${testID}`                    | `myWeekCalendar`                |
| Day            | `${testID}.day_${date_string}` | `myWeekCalendar.day_2022-08-21` |

## Notes

Some components render others as internal components and their testIDs are based on the main parent id.  
For instance, if you'll pass `myExpandableCalendar` to ExpandableCalendar testID.  
In order to query a Day element, you'll need to go though all the render hierarchy's testIDs.

In this case. ExpandableCalendar -> CalendarList -> Calendar -> Day.  
And the testID for the Day element will be `myExpandableCalendar.calendarList.item_${year}-${month}.day_${date_string}`.

---

### DocsRNC Docs Components Agenda (`docsRNC/docs/Components/Agenda.md`)

Agenda component  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx)
:::info
This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx), [FlatList](https://reactnative.dev/docs/flatlist)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
  <img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/agenda.gif?raw=true'}/>
</div>

## API

### items

the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded  
<span style={{color: 'grey'}}>AgendaSchedule</span>

### loadItemsForMonth

Handler which gets executed when items for a certain month should be loaded (month became visible)  
<span style={{color: 'grey'}}>(data: DateData) => void</span>

### onDayChange

Handler which gets executed when day changes while scrolling agenda list  
<span style={{color: 'grey'}}>(data: DateData) => void</span>

### onCalendarToggled

Handler which gets executed when the calendar is opened or closed  
<span style={{color: 'grey'}}>(enabled: boolean) => void</span>

### selected

initially selected day  
<span style={{color: 'grey'}}>string</span>

### renderKnob

Replace default agenda's knob with a custom one  
<span style={{color: 'grey'}}>() => JSX.Element</span>

### hideKnob

Whether to hide the knob  
<span style={{color: 'grey'}}>boolean</span>

### showClosingKnob

Whether the knob should always be visible (when hideKnob = false)  
<span style={{color: 'grey'}}>boolean</span>

### showOnlySelectedDayItems

Whether to show items only for the selected date  
<span style={{color: 'grey'}}>boolean</span>

### renderEmptyData

Replace default ActivityIndicator with a custom one  
<span style={{color: 'grey'}}>() => JSX.Element</span>

<br/>

## Agenda Examples

<br/>

```
/* Detailed source-code truncated for AI context efficiency. */
```

---

### DocsRNC Docs Components AgendaList (`docsRNC/docs/Components/AgendaList.md`)

Agenda list component for the `ExpandableCalendar` component.  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendarScreen.tsx)
:::info
This component extends **[FlatList](https://reactnative.dev/docs/flatlist)** props.
:::
**NOTE: This component should be wrapped with `CalendarProvider` component.**

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/expandable-calendar.gif?raw=true'}/>

</div>

## API

### theme

Specify theme properties to override specific styles for calendar parts  
<span style={{color: 'grey'}}>Theme</span>

### dayFormat

Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting  
<span style={{color: 'grey'}}>string</span>

### dayFormatter

A function to custom format the section header's title  
<span style={{color: 'grey'}}>(arg0: string) => string</span>

### useMoment

Whether to use moment.js for date string formatting  
<span style={{color: 'grey'}}>boolean</span>

### markToday

Whether to mark today's title with the 'Today, ...' string  
<span style={{color: 'grey'}}>boolean</span>

### avoidDateUpdates

Whether to block the date change in calendar (and calendar context provider) when agenda scrolls  
<span style={{color: 'grey'}}>boolean</span>

### scrollToNextEvent

Whether to enable scrolling the agenda list to the next date with content when pressing a day without content  
<span style={{color: 'grey'}}>boolean</span>

### viewOffset

Offset scroll to the section  
<span style={{color: 'grey'}}>number</span>

### sectionStyle

The style passed to the section view  
<span style={{color: 'grey'}}>ViewStyle</span>

---

### DocsRNC Docs Components Calendar (`docsRNC/docs/Components/Calendar.md`)

Calendar component  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarScreen.tsx)
:::info
This component extends **[CalendarHeader](https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.tsx), [BasicDay](https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/index.tsx)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
  <img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif?raw=true'}/>
</div>

## API

### theme

Specify theme properties to override specific styles for calendar parts  
<span style={{color: 'grey'}}>Theme</span>

### style

Specify style for calendar container element  
<span style={{color: 'grey'}}>ViewStyle</span>

### headerStyle

Specify style for calendar header  
<span style={{color: 'grey'}}>ViewStyle</span>

### customHeader

Allow rendering a totally custom header  
<span style={{color: 'grey'}}>any</span>

### initialDate

Initially visible month  
<span style={{color: 'grey'}}>string</span>

### minDate

Minimum date that can be selected, dates before minDate will be grayed out  
<span style={{color: 'grey'}}>string</span>

### maxDate

Maximum date that can be selected, dates after maxDate will be grayed out  
<span style={{color: 'grey'}}>string</span>

### firstDay

If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday  
<span style={{color: 'grey'}}>number</span>

### markedDates

Collection of dates that have to be marked  
<span style={{color: 'grey'}}>MarkedDatesType</span>

### displayLoadingIndicator

Whether to display loading indicator  
<span style={{color: 'grey'}}>boolean</span>

### showWeekNumbers

Whether to show weeks numbers  
<span style={{color: 'grey'}}>boolean</span>

### hideExtraDays

Whether to hide days of other months in the month page  
<span style={{color: 'grey'}}>boolean</span>

### showSixWeeks

Whether to always show six weeks on each month (when hideExtraDays = false)  
<span style={{color: 'grey'}}>boolean</span>

### disableMonthChange

Whether to disable changing month when click on days of other months (when hideExtraDays is false)  
<span style={{color: 'grey'}}>boolean</span>

### enableSwipeMonths

Whether to enable the option to swipe between months  
<span style={{color: 'grey'}}>boolean</span>

### disabledByDefault

Whether to disable days by default  
<span style={{color: 'grey'}}>boolean</span>

### allowSelectionOutOfRange

Whether to allow selection of dates before minDate or after maxDate  
<span style={{color: 'grey'}}>boolean</span>

### onDayPress

Handler which gets executed on day press  
<span style={{color: 'grey'}}>(date: DateData) => void</span>

### onDayLongPress

Handler which gets executed on day long press  
<span style={{color: 'grey'}}>(date: DateData) => void</span>

### onMonthChange

Handler which gets executed when month changes in calendar  
<span style={{color: 'grey'}}>(date: DateData) => void</span>

### onVisibleMonthsChange

Handler which gets executed when visible month changes in calendar  
<span style={{color: 'grey'}}>(months: DateData[]) => void</span>

### monthFormat

Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting  
<span style={{color: 'grey'}}>string</span>

### hideDayNames

Whether to hide the days names  
<span style={{color: 'grey'}}>boolean</span>

### hideArrows

Whether to hide the arrows  
<span style={{color: 'grey'}}>boolean</span>

### arrowsHitSlop

Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20
<span style={{color: 'grey'}}>null | Insets | number</span>

### disableArrowLeft

Whether to disable the left arrow  
<span style={{color: 'grey'}}>boolean</span>

### disableArrowRight

Whether to disable the right arrow  
<span style={{color: 'grey'}}>boolean</span>

### renderArrow

Replace default arrows with custom ones (direction: 'left' | 'right')  
<span style={{color: 'grey'}}>(direction: Direction) => ReactNode</span>

### onPressArrowLeft

Handler which gets executed when press left arrow. It receive a callback to go to the previous month  
<span style={{color: 'grey'}}>(method: () => void, month?: string) => void</span>

### onPressArrowRight

Handler which gets executed when press right arrow. It receive a callback to go to the next month  
<span style={{color: 'grey'}}>(method: () => void, month?: string) => void</span>

### disabledDaysIndexes

Whether to apply custom disable color to selected day names indexes  
<span style={{color: 'grey'}}>number[]</span>

### renderHeader

Replace default title with custom one  
<span style={{color: 'grey'}}>(date?: string) => ReactNode</span>

### customHeaderTitle

Replace default title with custom element  
<span style={{color: 'grey'}}>JSX.Element</span>

### dayComponent

Replace default day with custom day rendering component  
<span style={{color: 'grey'}}>JSX.Element</span>

### disableAllTouchEventsForDisabledDays

Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates')  
<span style={{color: 'grey'}}>boolean</span>

### disableAllTouchEventsForInactiveDays

Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')  
<span style={{color: 'grey'}}>boolean</span>

<br/>

## Calendar Examples

<br/>

#### Basic parameters

```
/* Detailed source-code truncated for AI context efficiency. */
```

#### Date marking

**Disclaimer**: Make sure that `markedDates` param is immutable. If you change `markedDates` object content but the reference to it does not change calendar update will not be triggered.

- Dot marking

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true"/>

```javascript
<Calendar
  // Collection of dates that have to be marked. Default = {}
  markedDates={{
    '2012-05-16': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-05-17': {marked: true},
    '2012-05-18': {marked: true, dotColor: 'red', activeOpacity: 0},
    '2012-05-19': {disabled: true, disableTouchEvent: true}
  }}
/>
```

You can customize a dot color for each day independently.

- Multi-Dot marking

 <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true"/>

Use `markingType={'multi-dot'}` if you want to display more than one dot. Both the `<Calendar/>` and `<CalendarList/>` support multiple dots by using `dots` array in `markedDates` prop.
The property `color` is mandatory while `key` and `selectedColor` are optional. If key is omitted then the array index is used as key. If `selectedColor` is omitted then `color` will be used for selected dates.

```javascript
const vacation = {key: 'vacation', color: 'red', selectedDotColor: 'blue'};
const massage = {key: 'massage', color: 'blue', selectedDotColor: 'blue'};
const workout = {key: 'workout', color: 'green'};

<Calendar
  markingType={'multi-dot'}
  markedDates={{
    '2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
    '2017-10-26': {dots: [massage, workout], disabled: true}
  }}
/>;
```

- Period marking

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true"/>

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true"/>

```javascript
<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-20': {textColor: 'green'},
    '2012-05-22': {startingDay: true, color: 'green'},
    '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
    '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
  }}
/>
```

- Multi-period marking

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true"/>

**CAUTION**: This marking is only fully supported by the `<Calendar/>` component because it expands its height. Usage with `<CalendarList/>` might lead to overflow issues.

```javascript
<Calendar
  markingType="multi-period"
  markedDates={{
    '2017-12-14': {
      periods: [
        {startingDay: false, endingDay: true, color: '#5f9ea0'},
        {startingDay: false, endingDay: true, color: '#ffa500'},
        {startingDay: true, endingDay: false, color: '#f0e68c'}
      ]
    },
    '2017-12-15': {
      periods: [
        {startingDay: true, endingDay: false, color: '#ffa500'},
        {color: 'transparent'},
        {startingDay: false, endingDay: false, color: '#f0e68c'}
      ]
    }
  }}
/>
```

- Custom marking (allows you to customize each marker with custom styles)

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true"/>

```javascript
<Calendar
  markingType={'custom'}
  markedDates={{
    '2018-03-28': {
      customStyles: {
        container: {
          backgroundColor: 'green'
        },
        text: {
          color: 'black',
          fontWeight: 'bold'
        }
      }
    },
    '2018-03-29': {
      customStyles: {
        container: {
          backgroundColor: 'white',
          elevation: 2
        },
        text: {
          color: 'blue'
        }
      }
    }
  }}
/>
```

**NEW!** While we still don't support multi marking type, we add the possibility to combine between `period` and `dot`.

```javascript
<Calendar
  markingType={'period'}
  markedDates={{
    '2012-05-15': {marked: true, dotColor: '#50cebb'},
    '2012-05-16': {marked: true, dotColor: '#50cebb'},
    '2012-05-21': {startingDay: true, color: '#50cebb', textColor: 'white'},
    '2012-05-22': {color: '#70d7c7', textColor: 'white'},
    '2012-05-23': {color: '#70d7c7', textColor: 'white', marked: true, dotColor: 'white'},
    '2012-05-24': {color: '#70d7c7', textColor: 'white'},
    '2012-05-25': {endingDay: true, color: '#50cebb', textColor: 'white'}
  }}
/>
```

  <img height={350} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true"/>

Keep in mind that different marking types are not compatible. You can use just one marking style for a calendar.

#### Displaying data loading indicator

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true"/>

The loading indicator next to the month name will be displayed if `<Calendar/>` has `displayLoadingIndicator` prop and the `markedDates` collection does not have a value for every day of the month in question. When you load data for days, just set `[]` or special marking value to all days in `markedDates` collection.

#### Customizing look & feel

```javascript
<Calendar
  // Specify style for calendar container element. Default = {}
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify theme properties to override specific styles for calendar parts. Default = {}
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: '#b6c1cd',
    textSectionTitleDisabledColor: '#d9e1e8',
    selectedDayBackgroundColor: '#00adf5',
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    disabledArrowColor: '#d9e1e8',
    monthTextColor: 'blue',
    indicatorColor: 'blue',
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontWeight: '300',
    textMonthFontWeight: 'bold',
    textDayHeaderFontWeight: '300',
    textDayFontSize: 16,
    textMonthFontSize: 16,
    textDayHeaderFontSize: 16
  }}
/>
```

#### Customize days titles with disabled styling

```javascript
<Calendar
  theme={{
    textSectionTitleDisabledColor: '#d9e1e8'
  }}
  markedDates={{
    ...this.getDisabledDates('2012-05-01', '2012-05-30', [0, 6])
  }}
  disabledDaysIndexes={[0, 6]}
/>
```

#### Advanced styling

If you want to have complete control over the calendar styles you can do it by overriding default `style.ts` files. For example, if you want to override `<CalendarHeader/>` style first you have to find stylesheet id for this file:

https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/style.ts#L60

In this case it is `stylesheet.calendar.header`. Next you can add overriding stylesheet to your theme with this id.

https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendars.tsx#L142

```javascript
theme={{
  arrowColor: 'white',
  'stylesheet.calendar.header': {
    week: {
      marginTop: 5,
      flexDirection: 'row',
      justifyContent: 'space-between'
    }
  }
}}
```

#### Individual day header styling

Using the above advanced styling, it is possible to set styles independently for each day's header. If we wanted to make the header for Sunday red, and Saturday blue, we could write something like the following:

```javascript
theme={{
  'stylesheet.calendar.header': {
    dayTextAtIndex0: {
      color: 'red'
    },
    dayTextAtIndex6: {
      color: 'blue'
    }
  }
}}
```

  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/day-header-style.png?raw=true"/>

**Disclaimer**: Issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.

#### Overriding day component

If you need custom functionality not supported by current day component implementations you can pass your own custom day component to the calendar.

```javascript
<Calendar
  style={[styles.calendar, {height: 300}]}
  dayComponent={({date, state}) => {
    return (
      <View>
        <Text style={{textAlign: 'center', color: state === 'disabled' ? 'gray' : 'black'}}>{date.day}</Text>
      </View>
    );
  }}
/>
```

The `dayComponent` prop has to receive a RN component or a function that receive props. The `dayComponent` will receive such props:

- state - disabled if the day should be disabled (this is decided by base calendar component).
- marking - `markedDates` value for this day.
- date - the date object representing this day.

**Tip**: Don't forget to implement `shouldComponentUpdate()` for your custom day component to make the calendar perform better

If you implement an awesome day component please make a PR so that other people could use it :)

---

### DocsRNC Docs Components CalendarList (`docsRNC/docs/Components/CalendarList.md`)

Calendar list component  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/calendarListScreen.tsx)
:::info
This component extends **[Calendar](https://github.com/wix/react-native-calendars/blob/master/src/calendar/index.tsx), [FlatList](https://reactnative.dev/docs/flatlist)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
  <img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar-list.gif?raw=true'}/>
</div>

## API

### pastScrollRange

Max amount of months allowed to scroll to the past  
<span style={{color: 'grey'}}>number</span>

### futureScrollRange

Max amount of months allowed to scroll to the future  
<span style={{color: 'grey'}}>number</span>

### calendarStyle

Specify style for calendar container element  
<span style={{color: 'grey'}}>ViewStyle</span>

### calendarHeight

Dynamic calendar height  
<span style={{color: 'grey'}}>number</span>

### calendarWidth

Used when calendar scroll is horizontal, (when pagingEnabled = false)  
<span style={{color: 'grey'}}>number</span>

### staticHeader

Whether to use a fixed header that doesn't scroll (when horizontal = true)  
<span style={{color: 'grey'}}>boolean</span>

### showScrollIndicator

Whether to enable or disable vertical / horizontal scroll indicator  
<span style={{color: 'grey'}}>boolean</span>

<br/>

## Calendar List Examples

<br/>

`<CalendarList/>` is scrollable semi-infinite calendar composed of `<Calendar/>` components. Currently it is possible to scroll 4 years back and 4 years to the future. All parameters that are available for `<Calendar/>` are also available for this component. There are also some additional params that can be used:

```javascript
<CalendarList
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}
  ...calendarParams
/>
```

#### Horizontal CalendarList

  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/horizontal-calendar-list.gif?raw=true"/>

You can also make the `CalendarList` scroll horizontally. To do that you need to pass specific props to the `CalendarList`:

```javascript
<CalendarList
  // Enable horizontal scrolling, default = false
  horizontal={true}
  // Enable paging on horizontal, default = false
  pagingEnabled={true}
  // Set custom calendarWidth.
  calendarWidth={320}
  ...calendarListParams
  ...calendarParams
/>
```

---

### DocsRNC Docs Components CalendarProvider (`docsRNC/docs/Components/CalendarProvider.md`)

Calendar context provider component  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendarScreen.tsx)
:::info
This component extends **[Context](https://reactjs.org/docs/context.html)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}></div>

## API

### theme

Specify theme properties to override specific styles for calendar parts  
<span style={{color: 'grey'}}>Theme</span>

### style

Specify style for calendar container element  
<span style={{color: 'grey'}}>ViewStyle</span>

### date

Initial date in 'yyyy-MM-dd' format  
<span style={{color: 'grey'}}>string</span>

### onDateChanged

Handler which gets executed when the date changes  
<span style={{color: 'grey'}}>(date: string, updateSource: UpdateSource) => void</span>

### onMonthChange

Handler which gets executed when the month changes  
<span style={{color: 'grey'}}>(date: DateData, updateSource: UpdateSource) => void</span>

### showTodayButton

Whether to show the today button  
<span style={{color: 'grey'}}>boolean</span>

### todayButtonStyle

Today button's style  
<span style={{color: 'grey'}}>ViewStyle</span>

### todayBottomMargin

Today button's top position  
<span style={{color: 'grey'}}>number</span>

### disabledOpacity

The opacity for the disabled today button (0-1)  
<span style={{color: 'grey'}}>number</span>

---

### DocsRNC Docs Components ExpandableCalendar (`docsRNC/docs/Components/ExpandableCalendar.md`)

Expandable calendar component  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendarScreen.tsx)
:::info
This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx)** props.
:::
**NOTE: This component should be wrapped with `CalendarProvider` component.**

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/expandable-calendar.gif?raw=true'}/>

</div>

## API

### initialPosition

The initial position of the calendar ('open' | 'closed')  
<span style={{color: 'grey'}}>Positions</span>

### onCalendarToggled

Handler which gets executed when the calendar is opened or closed  
<span style={{color: 'grey'}}>(isOpen: boolean) => void</span>

### disablePan

Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist)  
<span style={{color: 'grey'}}>boolean</span>

### hideKnob

Whether to hide the knob  
<span style={{color: 'grey'}}>boolean</span>

### leftArrowImageSource

The source for the left arrow image  
<span style={{color: 'grey'}}>ImageSourcePropType</span>

### rightArrowImageSource

The source for the right arrow image  
<span style={{color: 'grey'}}>ImageSourcePropType</span>

### allowShadow

Whether to have shadow/elevation for the calendar  
<span style={{color: 'grey'}}>boolean</span>

### disableWeekScroll

Whether to disable the week scroll in closed position  
<span style={{color: 'grey'}}>boolean</span>

### openThreshold

The threshold for opening the calendar with the pan gesture  
<span style={{color: 'grey'}}>number</span>

### closeThreshold

The threshold for closing the calendar with the pan gesture  
<span style={{color: 'grey'}}>number</span>

### closeOnDayPress

Whether to close the calendar on day press  
<span style={{color: 'grey'}}>boolean</span>

---

### DocsRNC Docs Components Timeline (`docsRNC/docs/Components/Timeline.md`)

Timeline component  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/timelineCalendarScreen.tsx)
:::info
This component extends **[ScrollView](https://reactnative.dev/docs/scrollview)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/timeline-calendar.gif?raw=true'}/>

</div>

## API

### theme

Specify theme properties to override specific styles for calendar parts  
<span style={{color: 'grey'}}>Theme</span>

### style

Specify style for calendar container element  
<span style={{color: 'grey'}}>ViewStyle</span>

### events

List of events to render on the timeline  
<span style={{color: 'grey'}}>Event[]</span>

### start

The timeline day start time  
<span style={{color: 'grey'}}>number</span>

### end

The timeline day end time  
<span style={{color: 'grey'}}>number</span>

### onEventPress

Handler which gets executed when event is pressed  
<span style={{color: 'grey'}}>(event: Event) => void</span>

### onBackgroundLongPress

Handler which gets executed when background is long pressed. Pass to handle creation of a new event  
<span style={{color: 'grey'}}>(timeString: string, time: NewEventTime) => void</span>

### onBackgroundLongPressOut

Handler which gets executed when background's long pressed released. Pass to handle creation of a new event  
<span style={{color: 'grey'}}>(timeString: string, time: NewEventTime) => void</span>

### renderEvent

Specify a custom event block  
<span style={{color: 'grey'}}>(event: PackedEvent) => JSX.Element</span>

### scrollToFirst

Whether to scroll to the first event  
<span style={{color: 'grey'}}>boolean</span>

### format24h

Whether to use 24 hours format for the timeline hours  
<span style={{color: 'grey'}}>boolean</span>

---

### DocsRNC Docs Components WeekCalendar (`docsRNC/docs/Components/WeekCalendar.md`)

Week calendar component. You MUST wrap it inside a CalendarProvider component.  
[(code example)](https://github.com/wix/react-native-calendars/blob/master/example/src/screens/expandableCalendarScreen.tsx)
:::info
This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx)** props.
:::

<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/week-calendar.gif?raw=true'}/>

</div>

## API

### allowShadow

Whether to have shadow/elevation for the calendar  
<span style={{color: 'grey'}}>boolean</span>

### hideDayNames

Whether to hide the names of the week days  
<span style={{color: 'grey'}}>boolean</span>

---

--- METRICS ---
- Files Extracted: 12
- Estimated Token Budget: ~11571 tokens
- Canonical Reference: https://codewiki.google/github.com/wix/react-native-calendars