Guide · Open source
How to use react-native-calendars: install and show a calendar
Updated · written with AI from the project's own documentation and checked against our catalogue data
react-native-calendars is an MIT-licensed, TypeScript-based calendar component library for React Native apps on iOS and Android. This guide shows you how to install it, render a basic Calendar, mark dates, change the locale and apply a theme. By the end you will have a working calendar screen in a React Native or Expo project.
react-native-calendarswix/react-native-calendars · ★ 10.3k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm you have Node.js, a React Native or Expo project, and Yarn installed.
- 2Install the package. Run yarn add react-native-calendars in your project folder.
- 3Import the component. Import Calendar, CalendarList or Agenda from 'react-native-calendars'.
- 4Render a Calendar. Add the Calendar component to a screen and pass an onDayPress handler.
- 5Mark dates. Pass a markedDates object keyed by date strings to highlight selected or marked days.
- 6Set locale and theme. Use LocaleConfig for language and the theme prop for colors.
What you need before you install react-native-calendars
You need Node.js, a React Native project or an Expo project, and Yarn. The package is installed with Yarn in the examples below.
- Node.js
- A React Native project or an Expo project
- Yarn
Install react-native-calendars with Yarn
Run the install command from your project folder. The README states that the library is implemented in JavaScript, so no native module linking is required.
yarn add react-native-calendarsImport and render a basic Calendar
The package exports Calendar, CalendarList and Agenda. Import the ones you need, then pass an onDayPress callback to receive the date the user taps. The callback gets a day object, and the README logs it with console.log.
The example below stores the selected date in state and marks it with markedDates, which is the pattern the README uses for a basic selectable calendar.
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;Mark dates and set a starting month
The markedDates prop takes an object keyed by date strings. Each entry can set flags such as selected, marked and selectedColor. The README's customization example also sets the current prop to choose the month shown.
The README lists dot, multi-dot, period, multi-period and custom marking as supported date marking types. Its examples show the visual results, but the README does not list every option for each type, so check the official documentation for the full set.
- Use current to set the month shown, for example '2012-03-01'.
- Use markedDates keyed by 'YYYY-MM-DD' strings.
- Use style to add a border or set a height, as the README example does.
<Calendar
style={{
borderWidth: 1,
borderColor: 'gray',
height: 350
}}
current={'2012-03-01'}
onDayPress={day => {
console.log('selected day', day);
}}
markedDates={{
'2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
'2012-03-02': {marked: true},
'2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
}}
/>Change the calendar language with LocaleConfig
To show month and day names in another language, add a locale to LocaleConfig.locales and set it as the default. The README example adds French month names, day names, abbreviations and a label for today.
The library also formats dates automatically for different locales, according to the README's feature list.
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';Apply a theme to the calendar
The theme prop accepts color keys such as selectedDayBackgroundColor, todayTextColor and dayTextColor. The README example sets these to customize the look of the whole calendar.
<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'
}}
/>What people use it for
- A booking screen that lets users pick a date and blocks unavailable days.
- A calendar that shows dots on days with events.
- A highlighted period on a calendar, such as a trip or a leave request.
- A scheduling screen that uses the Agenda view to list items by day.
- A localized date picker for users who read French, using the LocaleConfig example.
Frequently asked questions
Is react-native-calendars free to use?
Yes. The README states that react-native-calendars is MIT licensed. Check the LICENSE file in the repository for the full terms.
How do I install react-native-calendars?
Run yarn add react-native-calendars in your project folder. The README says the library is pure JavaScript, so no native module linking is required.
Does react-native-calendars work with Expo?
The README says the project is compatible with Expo and CRNA without ejecting, and it links to examples published on Expo.
Do I need to link native modules?
No. The README says react-native-calendars is implemented in JavaScript and needs no native module linking.
Does it support iOS and Android?
Yes. The README says the package is compatible with both Android and iOS.
Where can I find the full API reference?
The README points to an official documentation site at wix.github.io/react-native-calendars/docs/Intro for detailed information, since the README only covers basic examples.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Choose react-native-calendars if you are building a React Native or Expo app and need a calendar or date picker with dot and period marking, date blocking or an agenda view. Pick something else if you are not building a React Native app, or if you need a calendar built directly on native platform APIs, since this library is a JavaScript implementation.
Install options & downloads