React Native Calendars

https://wix.github.io/react-native-calendars/docs
Admin
React Native Calendars is a customizable calendar component library for React Native applications...
Tokens:12,953
Snippets:115
Trust Score:8.3
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install React Native Calendars with Yarn

Source: https://wix.github.io/react-native-calendars/docs/Intro

Install the react-native-calendars package using Yarn.

```bash
yarn add react-native-calendars  
```

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

### Install React Native Calendars with npm

Source: https://wix.github.io/react-native-calendars/docs/Intro

Install the react-native-calendars package using npm.

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

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

### AgendaList Usage Example

Source: https://wix.github.io/react-native-calendars/docs/Components/AgendaList

This is a basic example of how to use the AgendaList component. Remember to wrap it with a CalendarProvider.

```javascript
import React, {Component} from 'react';
import {Agenda} from 'react-native-calendars';
import {StyleSheet, Text, View} from 'react-native';

export default class AgendaScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {}
    };
  }

  render() {
    return (
      <Agenda
        items={this.state.items}
        loadItemsForMonth={this.loadItems.bind(this)}
        selected={'2017-05-22'}
      />
    );
  }

  loadItems(day) {
    setTimeout(() => {
      for (let i = -15; i < 85; i++) {
        const time = day.timestamp + i * 24 * 60 * 60 * 1000;
        const strTime = this.timeToString(time);
        if (!this.state.items[strTime]) {
          this.state.items[strTime] = [];
          if (strTime === '2017-05-22') {
            this.state.items[strTime].push({
              name: 'Meeting with Mr. Smith',
              height: 80
            });
            this.state.items[strTime].push({
              name: 'Hip, Hip, Hurray!',
              height: 60
            });
          }
          if (strTime === '2017-05-23') {
            this.state.items[strTime].push({
              name: 'Make a plan for this week',
              height: 100
            });
            this.state.items[strTime].push({
              name: 'Read a book',
              height: 50
            });
            this.state.items[strTime].push({
              name: 'Write a letter',
              height: 70
            });
            this.state.items[strTime].push({
              name: 'Cook dinner',
              height: 80
            });
          }
        }
      }

      const newItems = {};
      Object.keys(this.state.items).forEach(key => {
        newItems[key] = this.state.items[key];
      });
      this.setState({
        items: newItems
      });
    }, 1000);
  }

  timeToString(time) {
    const date = new Date(time);
    return date.toISOString().split('T')[0];
  }
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    flex: 1,
    borderRadius: 5,
    padding: 10,
    marginRight: 30,
    marginTop: 17
  },
  emptyDate: {
    height: 15,
    flex: 1,
    paddingTop: 30
  }
});

```

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

### Clone and Run Sample Project

Source: https://wix.github.io/react-native-calendars/docs/Intro

Steps to clone the repository, install dependencies, and run the sample application on iOS.

```bash
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  
```

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

### WeekCalendar Example

Source: https://wix.github.io/react-native-calendars/docs/Components/WeekCalendar

Basic usage of the WeekCalendar component. This component extends CalendarList props.

```javascript
import React from 'react';
import { View } from 'react-native';
import WeekCalendar from 'react-native-calendars/src/components/weekCalendar';

const MyWeekCalendar = () => {
  return (
    <View>
      <WeekCalendar />
    </View>
  );
};

export default MyWeekCalendar;
```

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

### Calendar Event Object Structure

Source: https://wix.github.io/react-native-calendars/docs/Intro

Example of the structure for calendar event handler callbacks.

```json
{
  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  
}
```

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

### Configure French Locales for Calendar

Source: https://wix.github.io/react-native-calendars/docs/Intro

Example of how to configure custom locales for the calendar component, specifically for French.

```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';  
```

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

### Horizontal CalendarList

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarList

Example demonstrating how to configure the CalendarList component for horizontal scrolling using props like horizontal, pagingEnabled, and calendarWidth.

```APIDOC
## Horizontal CalendarList

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

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

### Timeline Component Usage

Source: https://wix.github.io/react-native-calendars/docs/Components/Timeline

Basic example of using the Timeline component. This component extends ScrollView props.

```javascript
import React, {useState, useCallback} from 'react';
import {StyleSheet, View, Alert} from 'react-native';
import {Timeline, Theme, Event, PackedEvent, NewEventTime} from 'react-native-calendars';

const INITIAL_DATE = '2023-05-15';

const App = () => {
  const [selectedDate, setSelectedDate] = useState(INITIAL_DATE);

  const onEventPress = useCallback((event: Event) => {
    Alert.alert('Event pressed', event.title);
  }, []);

  const onBackgroundLongPress = useCallback((timeString: string, time: NewEventTime) => {
    Alert.alert('Long press', `Time: ${timeString}`);
    // Example: Add a new event
    // const newEvent: Event = { ... };
    // setEvents(prevEvents => [...prevEvents, newEvent]);
  }, []);

  const renderEvent = useCallback((event: PackedEvent) => {
    return (
      <View style={styles.eventContainer}>
        {/* Custom event rendering */}
        <Text style={styles.eventTitle}>{event.title}</Text>
      </View>
    );
  }, []);

  const events: Event[] = [
    {
      id: '1',
      title: 'Meeting',
      start: '2023-05-15T09:00:00',
      end: '2023-05-15T10:30:00',
      color: '#00A1F1'
    },
    {
      id: '2',
      title: 'Lunch',
      start: '2023-05-15T12:00:00',
      end: '2023-05-15T13:00:00',
      color: '#FFC107'
    },
    {
      id: '3',
      title: 'Project Discussion',
      start: '2023-05-15T14:00:00',
      end: '2023-05-15T16:00:00',
      color: '#4CAF50'
    }
  ];

  const theme: Theme = {
    // Customize theme properties here
    primaryColor: '#00A1F1',
    secondaryColor: '#FFC107',
    textColor: '#333',
    backgroundColor: '#f0f0f0'
  };

  return (
    <View style={styles.container}>
      <Timeline
        events={events}
        theme={theme}
        initialDate={selectedDate}
        onEventPress={onEventPress}
        onBackgroundLongPress={onBackgroundLongPress}
        renderEvent={renderEvent}
        scrollToFirst={true}
        format24h={false} // Use 12-hour format
        start={8} // Timeline starts at 8 AM
        end={18} // Timeline ends at 6 PM
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#fff'
  },
  eventContainer: {
    padding: 10,
    backgroundColor: 'lightblue',
    borderRadius: 5
  },
  eventTitle: {
    fontSize: 16,
    fontWeight: 'bold'
  }
});

export default App;

```

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

### Agenda Component Configuration

Source: https://wix.github.io/react-native-calendars/docs/Components/Agenda

This snippet shows a comprehensive configuration of the Agenda component, demonstrating how to provide items, load data, handle user interactions, and customize rendering and theming. Use this as a starting point for integrating the Agenda component into your application.

```javascript
<Agenda  
  // 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  
  items={{
    '2012-05-22': [{name: 'item 1 - any js object'}],
    '2012-05-23': [{name: 'item 2 - any js object', height: 80}],
    '2012-05-24': [],
    '2012-05-25': [{name: 'item 3 - any js object'}, {name: 'any js object'}]
  }}  
  // Callback that gets called when items for a certain month should be loaded (month became visible)  
  loadItemsForMonth={month => {
    console.log('trigger items loading');
  }}
  // Callback that fires when the calendar is opened or closed  
  onCalendarToggled={calendarOpened => {
    console.log(calendarOpened);
  }}
  // Callback that gets called on day press  
  onDayPress={day => {
    console.log('day pressed');
  }}
  // Callback that gets called when day changes while scrolling agenda list  
  onDayChange={day => {
    console.log('day changed');
  }}
  // Initially selected day  
  selected={'2012-05-16'}
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined  
  minDate={'2012-05-10'}
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined  
  maxDate={'2012-05-30'}
  // 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}
  // Specify how each item should be rendered in agenda  
  renderItem={(item, firstItemInDay) => {
    return <View />;
  }}
  // Specify how each date should be rendered. day can be undefined if the item is not first in that day  
  renderDay={(day, item) => {
    return <View />;
  }}
  // Specify how empty date content with no items should be rendered  
  renderEmptyDate={() => {
    return <View />;
  }}
  // Specify how agenda knob should look like  
  renderKnob={() => {
    return <View />;
  }}
  // Override inner list with a custom implemented component  
  renderList={listProps => {
    return <MyCustomList {...listProps} />;
  }}
  // Specify what should be rendered instead of ActivityIndicator  
  renderEmptyData={() => {
    return <View />;
  }}
  // Specify your item comparison function for increased performance  
  rowHasChanged={(r1, r2) => {
    return r1.text !== r2.text;
  }}
  // Hide knob button. Default = false  
  hideKnob={true}
  // When `true` and `hideKnob` prop is `false`, the knob will always be visible and the user will be able to drag the knob up and close the calendar. Default = false  
  showClosingKnob={false}
  // By default, agenda dates are marked if they have at least one item, but you can override this if needed  
  markedDates={{
    '2012-05-16': {selected: true, marked: true},
    '2012-05-17': {marked: true},
    '2012-05-18': {disabled: true}
  }}
  // If disabledByDefault={true} dates flagged as not disabled will be enabled. Default = false  
  disabledByDefault={true}
  // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly  
  onRefresh={() => console.log('refreshing...')}
  // Set this true while waiting for new data from a refresh  
  refreshing={false}
  // Add a custom RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView  
  refreshControl={null}
  // Agenda theme  
  theme={{
    ...calendarTheme,
    agendaDayTextColor: 'yellow',
    agendaDayNumColor: 'green',
    agendaTodayColor: 'red',
    agendaKnobColor: 'blue'
  }}
  // Agenda container style  
  style={{}}
/>  

```

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

### CalendarList Basic Usage

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarList

Example of how to use the CalendarList component with common props like onVisibleMonthsChange, pastScrollRange, futureScrollRange, scrollEnabled, and showScrollIndicator.

```APIDOC
## CalendarList Basic Example

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

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

### Combined Period and Dot Marking

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

This example demonstrates combining period and dot marking styles on the same calendar. Note that only one marking type can be active per calendar.

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

```

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

### Individual Day Header Styling

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Independently style specific day headers within the calendar, for example, setting the color for Sunday and Saturday headers using the 'stylesheet.calendar.header' theme property.

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

```

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

### Calendar Component Basic Parameters

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Demonstrates the usage of basic parameters for the Calendar component, such as initial date, min/max dates, and event handlers for day and month changes. It also shows options for customizing navigation arrows and day names.

```javascript
<Calendar  
  // Initially visible month. Default = now  
  initialDate={'2012-03-01'}  
  // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined  
  minDate={'2012-05-10'}  
  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined  
  maxDate={'2012-05-30'}  
  // Handler which gets executed on day press. Default = undefined  
  onDayPress={day => {  
    console.log('selected day', day);  
  }}  
  // Handler which gets executed on day long press. Default = undefined  
  onDayLongPress={day => {  
    console.log('selected day', day);  
  }}  
  // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting  
  monthFormat={'yyyy MM'}  
  // Handler which gets executed when visible month changes in calendar. Default = undefined  
  onMonthChange={month => {  
    console.log('month changed', month);  
  }}  
  // Hide month navigation arrows. Default = false  
  hideArrows={true}  
  // Replace default arrows with custom ones (direction can be 'left' or 'right')  
  renderArrow={direction => <Arrow />}  
  // Do not show days of other months in month page. Default = false  
  hideExtraDays={true}  
  // If hideArrows = false and hideExtraDays = false do not switch month when tapping on greyed out  
  // day from another month that is visible in calendar page. Default = false  
  disableMonthChange={true}  
  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday  
  firstDay={1}  
  // Hide day names. Default = false  
  hideDayNames={true}  
  // Show week numbers to the left. Default = false  
  showWeekNumbers={true}  
  // Handler which gets executed when press arrow icon left. It receive a callback can go back month  
  onPressArrowLeft={subtractMonth => subtractMonth()}  
  // Handler which gets executed when press arrow right. It receive a callback can go next month  
  onPressArrowRight={addMonth => addMonth()}  
  // Disable left arrow. Default = false  
  disableArrowLeft={true}  
  // Disable right arrow. Default = false  
  disableArrowRight={true}  
  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates  
  disableAllTouchEventsForDisabledDays={true}  
  // Replace default month and year title with custom one. the function receive a date as parameter  
  renderHeader={date => {  
    /*Return JSX*/  
  }}  
  // Enable the option to swipe between months. Default = false  
  enableSwipeMonths={true}  
/>  

```

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

### Calendar Component Basic Usage

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Demonstrates the basic configuration of the Calendar component, including initial date, date range restrictions, day press handlers, month navigation, and display options.

```APIDOC
## Calendar Component

### Description

The Calendar component allows users to view and interact with a calendar interface. It supports features like date selection, month navigation, and customization of its appearance and behavior.

### Props

#### Basic Parameters

- **initialDate** (string) - Optional - Initially visible month. Defaults to the current date.
- **minDate** (string) - Optional - Minimum date that can be selected. Dates before this will be grayed out. Defaults to undefined.
- **maxDate** (string) - Optional - Maximum date that can be selected. Dates after this will be grayed out. Defaults to undefined.
- **onDayPress** (function) - Optional - Handler executed when a day is pressed. Receives the selected day object.
- **onDayLongPress** (function) - Optional - Handler executed when a day is long-pressed. Receives the selected day object.
- **monthFormat** (string) - Optional - Format for the month and year displayed in the calendar title. See http://arshaw.com/xdate/#Formatting for formatting values.
- **onMonthChange** (function) - Optional - Handler executed when the visible month changes. Receives the new month object.
- **hideArrows** (boolean) - Optional - Hides the month navigation arrows. Defaults to false.
- **renderArrow** (function) - Optional - Replaces default navigation arrows with custom components. Receives direction ('left' or 'right').
- **hideExtraDays** (boolean) - Optional - Hides days from adjacent months that appear in the current view. Defaults to false.
- **disableMonthChange** (boolean) - Optional - Prevents month changes when tapping on days from adjacent months if `hideArrows` and `hideExtraDays` are false. Defaults to false.
- **firstDay** (number) - Optional - Sets the first day of the week (1 for Monday, 7 for Sunday). Note: `dayNames` and `dayNamesShort` should still start from Sunday.
- **hideDayNames** (boolean) - Optional - Hides the names of the days of the week. Defaults to false.
- **showWeekNumbers** (boolean) - Optional - Displays week numbers to the left of the calendar. Defaults to false.
- **onPressArrowLeft** (function) - Optional - Handler for pressing the left arrow. Receives a callback function to go to the previous month.
- **onPressArrowRight** (function) - Optional - Handler for pressing the right arrow. Receives a callback function to go to the next month.
- **disableArrowLeft** (boolean) - Optional - Disables the left navigation arrow. Defaults to false.
- **disableArrowRight** (boolean) - Optional - Disables the right navigation arrow. Defaults to false.
- **disableAllTouchEventsForDisabledDays** (boolean) - Optional - Disables all touch events for days that are considered disabled. Can be overridden by `disableTouchEvent` in `markedDates`. Defaults to false.
- **renderHeader** (function) - Optional - Replaces the default month and year title with a custom component. Receives the current date object.
- **enableSwipeMonths** (boolean) - Optional - Enables swiping between months. Defaults to false.

### Example Usage

```jsx
<Calendar 
  initialDate={'2012-03-01'}
  minDate={'2012-05-10'}
  maxDate={'2012-05-30'}
  onDayPress={day => {
    console.log('selected day', day);
  }}
  monthFormat={'yyyy MM'}
  onMonthChange={month => {
    console.log('month changed', month);
  }}
  hideArrows={true}
  hideExtraDays={true}
  firstDay={1}
  showWeekNumbers={true}
  onPressArrowLeft={subtractMonth => subtractMonth()}
  onPressArrowRight={addMonth => addMonth()}
  disableArrowLeft={true}
  disableArrowRight={true}
  enableSwipeMonths={true}
/>
```
```

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

### Basic CalendarList Configuration

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarList

Configure the CalendarList with callbacks for visible month changes, scroll ranges, and scroll indicator visibility. Use this for standard vertical scrolling calendars.

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

```

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

### ExpandableCalendar Usage

Source: https://wix.github.io/react-native-calendars/docs/Components/ExpandableCalendar

Basic usage of the ExpandableCalendar component. Ensure it is wrapped with a CalendarProvider.

```javascript
import React, {useState, useCallback} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {ExpandableCalendar, CalendarProvider} from 'react-native-calendars';

const MyExpandableCalendar = () => {
  const [selectedDate, setSelectedDate] = useState('');

  const onDateChange = useCallback((date, updateSource) => {
    setSelectedDate(date);
  }, []);

  return (
    <CalendarProvider date={selectedDate} onDateChanged={onDateChange} >
      <ExpandableCalendar
        // initialPosition={'open'}
        // disablePan={true}
        // hideKnob={true}
        // allowShadow={false}
        // disableWeekScroll={true}
        // openThreshold={100}
        // closeThreshold={100}
        // closeOnDayPress={false}
      />
    </CalendarProvider>
  );
};

const styles = StyleSheet.create({
  // Add your styles here
});

export default MyExpandableCalendar;
```

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

### CalendarList API

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarList

This section details the available props for the CalendarList component, which extend those of the Calendar and FlatList components.

```APIDOC
## CalendarList Props

This component extends **Calendar, FlatList** props.

### pastScrollRange
Max amount of months allowed to scroll to the past
number

### futureScrollRange
Max amount of months allowed to scroll to the future
number

### calendarStyle
Specify style for calendar container element
ViewStyle

### calendarHeight
Dynamic calendar height
number

### calendarWidth
Used when calendar scroll is horizontal, (when pagingEnabled = false)
number

### staticHeader
Whether to use a fixed header that doesn't scroll (when horizontal = true)
boolean

### showScrollIndicator
Whether to enable or disable vertical / horizontal scroll indicator
boolean
```

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

### CalendarProvider Component Usage

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarProvider

This component extends Context props and is used to provide calendar context. It accepts various props for theming, styling, initial date, and event handlers.

```javascript
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {CalendarProvider, Calendar, DateData, Agenda} from 'react-native-calendars';

export default class CalendarProviderScreen extends Component {
  render() {
    return (
      <CalendarProvider
        date="2012-05-15"
        onDateChanged={this.onDateChanged.bind(this)}
        onMonthChange={this.onMonthChange.bind(this)}
      >
        <Calendar
          // Initially visible month. Default = Date()
          current={'2012-05-15'}
          // Handler which gets executed when press arrow icon.ρίου
          onPressArrowLeft={date => console.log('left', date)}
          // Handler which gets executed when press arrow icon.ρίου
          onPressArrowRight={date => console.log('right', date)}
        />
      </CalendarProvider>
    );
  }

  onDateChanged(date: DateData) {
    console.log('Date: ', date);
  }

  onMonthChange(date: DateData) {
    console.log('Month: ', date);
  }
}

```

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

### Horizontal CalendarList Configuration

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarList

Enable horizontal scrolling and paging for the CalendarList by setting the 'horizontal' and 'pagingEnabled' props. Requires a custom 'calendarWidth'.

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

```

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

### Timeline Component API

Source: https://wix.github.io/react-native-calendars/docs/Components/Timeline

This section details the properties available for the Timeline component, allowing for customization of its appearance, behavior, and event interactions.

```APIDOC
## Timeline Component API

### Description
Provides a comprehensive set of props to customize the Timeline component's appearance, behavior, and event handling.

### Properties

*   **theme** (Theme) - Required - Specify theme properties to override specific styles for calendar parts.
*   **style** (ViewStyle) - Required - Specify style for the calendar container element.
*   **events** (Event[]) - Required - List of events to render on the timeline.
*   **start** (number) - Required - The timeline day start time.
*   **end** (number) - Required - The timeline day end time.
*   **onEventPress** ((event: Event) => void) - Optional - Handler which gets executed when an event is pressed.
*   **onBackgroundLongPress** ((timeString: string, time: NewEventTime) => void) - Optional - Handler which gets executed when the background is long pressed. Used for creating new events.
*   **onBackgroundLongPressOut** ((timeString: string, time: NewEventTime) => void) - Optional - Handler which gets executed when the background long press is released. Used for creating new events.
*   **renderEvent** ((event: PackedEvent) => JSX.Element) - Optional - Specify a custom event block.
*   **scrollToFirst** (boolean) - Optional - Whether to scroll to the first event.
*   **format24h** (boolean) - Optional - Whether to use 24-hour format for the timeline hours.
```

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

### Agenda Component API

Source: https://wix.github.io/react-native-calendars/docs/Components/Agenda

This section details the props and event handlers available for the Agenda component.

```APIDOC
## Agenda Component Props

### items

**Description**: The list of items to be displayed in the agenda. If an item is to be rendered as an empty date, the value for the date key must be an empty array `[]`. If no value exists for a date key, it's considered that the date has not yet been loaded.

### loadItemsForMonth

**Description**: Handler executed when items for a specific month need to be loaded (e.g., when the month becomes visible).

**Type**: `(data: DateData) => void`

### onDayChange

**Description**: Handler executed when the day changes during agenda list scrolling.

**Type**: `(data: DateData) => void`

### onCalendarToggled

**Description**: Handler executed when the calendar is opened or closed.

**Type**: `(enabled: boolean) => void`

### selected

**Description**: The initially selected day.

**Type**: `string`

### renderKnob

**Description**: Allows replacing the default agenda's knob with a custom one.

**Type**: `() => JSX.Element`

### hideKnob

**Description**: Determines whether to hide the knob.

**Type**: `boolean`

### showClosingKnob

**Description**: Determines if the knob should always be visible (when `hideKnob` is false).

**Type**: `boolean`

### showOnlySelectedDayItems

**Description**: Determines whether to display items only for the selected date.

**Type**: `boolean`

### renderEmptyData

**Description**: Allows replacing the default `ActivityIndicator` with a custom component.

**Type**: `() => JSX.Element`
```

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

### ExpandableCalendar Props

Source: https://wix.github.io/react-native-calendars/docs/Components/ExpandableCalendar

This section details the available props for the ExpandableCalendar component, including initial state, event handlers, and visual customization options.

```APIDOC
## ExpandableCalendar Props

### initialPosition

The initial position of the calendar ('open' | 'closed').

### onCalendarToggled

Handler which gets executed when the calendar is opened or closed.
`(isOpen: boolean) => void`

### disablePan

Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist).
`boolean`

### hideKnob

Whether to hide the knob.
`boolean`

### leftArrowImageSource

The source for the left arrow image.
`ImageSourcePropType`

### rightArrowImageSource

The source for the right arrow image.
`ImageSourcePropType`

### allowShadow

Whether to have shadow/elevation for the calendar.
`boolean`

### disableWeekScroll

Whether to disable the week scroll in closed position.
`boolean`

### openThreshold

The threshold for opening the calendar with the pan gesture.
`number`

### closeThreshold

The threshold for closing the calendar with the pan gesture.
`number`

### closeOnDayPress

Whether to close the calendar on day press.
`boolean`
```

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

### Period Marking

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Use `markingType={'period'}` to highlight date ranges. Properties like `textColor`, `startingDay`, `endingDay`, and `color` can be customized for each period.

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

```

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

### Customize Calendar Container and Theme Styles

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Apply custom styles to the calendar container and define a comprehensive theme to override various calendar elements like background colors, text colors, and arrow colors.

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

```

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

### CalendarProvider Props

Source: https://wix.github.io/react-native-calendars/docs/Components/CalendarProvider

Props available for the CalendarProvider component, allowing customization of its behavior and appearance.

```APIDOC
## CalendarProvider Props

### theme
Specify theme properties to override specific styles for calendar parts.
Type: Theme

### style
Specify style for calendar container element.
Type: ViewStyle

### date
Initial date in 'yyyy-MM-dd' format.
Type: string

### onDateChanged
Handler which gets executed when the date changes.
Type: (date: string, updateSource: UpdateSource) => void

### onMonthChange
Handler which gets executed when the month changes.
Type: (date: DateData, updateSource: UpdateSource) => void

### showTodayButton
Whether to show the today button.
Type: boolean

### todayButtonStyle
Today button's style.
Type: ViewStyle

### todayBottomMargin
Today button's top position.
Type: number

### disabledOpacity
The opacity for the disabled today button (0-1).
Type: number
```

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

### Multi-Dot Marking

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Set `markingType={'multi-dot'}` to display multiple dots per day. Use the `dots` array within `markedDates`, where `color` is mandatory. `key` and `selectedDotColor` are optional.

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

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

### Customize Disabled Days Styling and Titles

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Modify the theme to change the color of disabled day titles and mark specific dates as disabled using the `markedDates` and `disabledDaysIndexes` props.

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

```

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

### Calendar Component API

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

The Calendar component offers a wide range of props to customize its appearance, behavior, and event handling. This includes theming, styling, date range restrictions, marking dates, and callbacks for day and month interactions.

```APIDOC
## Calendar Component API

### Properties

- **theme** (object) - Specify theme properties to override specific styles for calendar parts.
- **style** (ViewStyle) - Specify style for the calendar container element.
- **headerStyle** (ViewStyle) - Specify style for the calendar header.
- **customHeader** (any) - Allow rendering a totally custom header.
- **initialDate** (string) - Initially visible month.
- **minDate** (string) - Minimum date that can be selected, dates before minDate will be grayed out.
- **maxDate** (string) - Maximum date that can be selected, dates after maxDate will be grayed out.
- **firstDay** (number) - If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
- **markedDates** (MarkedDatesType) - Collection of dates that have to be marked.
- **displayLoadingIndicator** (boolean) - Whether to display loading indicator.
- **showWeekNumbers** (boolean) - Whether to show weeks numbers.
- **hideExtraDays** (boolean) - Whether to hide days of other months in the month page.
- **showSixWeeks** (boolean) - Whether to always show six weeks on each month (when hideExtraDays = false).
- **disableMonthChange** (boolean) - Whether to disable changing month when click on days of other months (when hideExtraDays is false).
- **enableSwipeMonths** (boolean) - Whether to enable the option to swipe between months.
- **disabledByDefault** (boolean) - Whether to disable days by default.
- **allowSelectionOutOfRange** (boolean) - Whether to allow selection of dates before minDate or after maxDate.
- **onDayPress** ((date: DateData) => void) - Handler which gets executed on day press.
- **onDayLongPress** ((date: DateData) => void) - Handler which gets executed on day long press.
- **onMonthChange** ((date: DateData) => void) - Handler which gets executed when month changes in calendar.
- **onVisibleMonthsChange** ((months: DateData[]) => void) - Handler which gets executed when visible month changes in calendar.
- **monthFormat** (string) - Month format for the header's title. Formatting values: http://arshaw.com/xdate/#Formatting.
- **hideDayNames** (boolean) - Whether to hide the days names.
- **hideArrows** (boolean) - Whether to hide the arrows.
- **arrowsHitSlop** (null | Insets | number) - Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20.
- **disableArrowLeft** (boolean) - Whether to disable the left arrow.
- **disableArrowRight** (boolean) - Whether to disable the right arrow.
- **renderArrow** ((direction: Direction) => ReactNode) - Replace default arrows with custom ones (direction: 'left' | 'right').
- **onPressArrowLeft** ((method: () => void, month?: string) => void) - Handler which gets executed when press left arrow. It receive a callback to go to the previous month.
- **onPressArrowRight** ((method: () => void, month?: string) => void) - Handler which gets executed when press right arrow. It receive a callback to go to the next month.
- **disabledDaysIndexes** (number[]) - Whether to apply custom disable color to selected day indexes.
- **renderHeader** ((date?: string) => ReactNode) - Replace default title with custom one.
- **customHeaderTitle** (JSX.Element) - Replace default title with custom element.
- **dayComponent** (JSX.Element) - Replace default day with custom day rendering component.
- **disableAllTouchEventsForDisabledDays** (boolean) - Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates').
- **disableAllTouchEventsForInactiveDays** (boolean) - Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates').
```

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

### Custom Day Component Implementation

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Replace the default day component with a custom React Native component or function. The custom component receives `date`, `state`, and `marking` props to render each day.

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

```

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

### Multi-Period Marking

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

The `multi-period` marking type allows for multiple, distinct periods on the same day. This is primarily supported by the `<Calendar/>` component due to its height expansion.

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

```

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

### Single Dot Marking

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Use `markedDates` to apply single dots to specific dates. You can customize properties like `selected`, `marked`, `selectedColor`, `dotColor`, and `activeOpacity`.

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

```

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

### Custom Marking Styles

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

The `custom` marking type enables detailed styling for individual markers. You can define `customStyles` for both the container and text elements of a marked date.

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

```

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

### Advanced Calendar Header Styling

Source: https://wix.github.io/react-native-calendars/docs/Components/Calendar

Override specific parts of the calendar header's stylesheet, such as the week layout, by referencing the stylesheet ID in the theme object. Use with caution as overrides are not officially supported.

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

```
Tokens:
Raw