Skip to main content
Get your first calendar up and running in your React Native app in just a few minutes.

​
Installation

1

Install the package

Install react-native-calendars using your preferred package manager:
npm install react-native-calendars
or
yarn add react-native-calendars
React Native Calendars is implemented in pure JavaScript, so no native module linking is required.
2

Import the Calendar component

Import the Calendar component into your React Native app:
import React, { useState } from 'react';
import { Calendar } from 'react-native-calendars';
3

Add a basic calendar

Here’s a simple example to get you started:
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Calendar } from 'react-native-calendars';

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  }
});

export default App;
This creates a basic calendar where users can select dates, and the selected date is highlighted in orange.
4

Enable swipe gestures (optional)

Add swipe functionality to navigate between months:
<Calendar
  enableSwipeMonths
  onDayPress={day => {
    setSelected(day.dateString);
  }}
  markedDates={{
    [selected]: {
      selected: true,
      selectedColor: 'orange'
    }
  }}
/>

​
Complete Working Example

Here’s a complete, copy-paste ready example with common features: 
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Calendar } from 'react-native-calendars';

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

  return (
    <View style={styles.container}>
      <Text style={styles.header}>My Calendar App</Text>
      
      <Calendar
        // Enable month switching by swiping
        enableSwipeMonths
        
        // Handler for day press
        onDayPress={day => {
          setSelected(day.dateString);
          console.log('selected day', day);
        }}
        
        // Mark selected date and other dates
        markedDates={{
          [selected]: {
            selected: true,
            disableTouchEvent: true,
            selectedColor: 'orange',
            selectedTextColor: 'white'
          },
          '2024-03-15': {
            marked: true,
            dotColor: 'red'
          },
          '2024-03-16': {
            marked: true,
            dotColor: 'blue'
          }
        }}
        
        // Customize the calendar appearance
        style={styles.calendar}
        theme={{
          selectedDayBackgroundColor: 'orange',
          selectedDayTextColor: 'white',
          todayTextColor: 'orange',
          arrowColor: 'orange'
        }}
      />
      
      {selected ? (
        <Text style={styles.selectedDate}>
          Selected: {selected}
        </Text>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center'
  },
  calendar: {
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8
  },
  selectedDate: {
    marginTop: 20,
    fontSize: 16,
    textAlign: 'center',
    color: '#333'
  }
});

export default App;

​
Next Steps

Now that you have a basic calendar working, explore more features:

Calendar Component

Learn about all Calendar props and customization options

Date Marking

Add dots, periods, and custom markings to dates

Theming

Customize colors, fonts, and styles

Advanced Examples

See more complex implementations and patterns

​
Common Use Cases

<Calendar
  markedDates={{
    '2024-03-10': { marked: true, dotColor: 'red' },
    '2024-03-11': { marked: true, dotColor: 'blue' },
    '2024-03-12': { marked: true, dotColor: 'green' }
  }}
/>

<Calendar
  minDate={'2024-01-01'}
  maxDate={'2024-12-31'}
  disableAllTouchEventsForDisabledDays
/>

<Calendar
  hideExtraDays
  firstDay={1} // Monday as first day
/>

<Calendar
  onMonthChange={month => {
    console.log('month changed', month);
  }}
/>

​
Troubleshooting

If you encounter any issues during installation or setup, make sure:
  • You’re using React Native 0.60 or higher
  • Your project’s dependencies are properly installed
  • You’ve restarted your Metro bundler after installing
The calendar component is highly customizable. Check out the Calendar Component documentation for a complete list of props and examples.

Build docs developers (and LLMs) love

Get started for freeTalk to us