Skip to main content

​
React Native Calendars

A declarative cross-platform React Native calendar component for iOS and Android. This powerful library provides highly customizable calendar components with support for marking dates, themes, localization, and multiple calendar types.

​
Key features

Pure JavaScript

No native code linking required. Works seamlessly with Expo and bare React Native projects.

Highly customizable

Customize colors, fonts, and layouts with a comprehensive theming system.

Multiple calendar types

Choose from Calendar, CalendarList, Agenda, and ExpandableCalendar components.

Date marking

Support for dot, multi-dot, period, multi-period, and custom marking styles.

Swipe gestures

Built-in swipe support for navigating between months with smooth animations.

Accessibility

Full accessibility support for screen readers and assistive technologies.

Localization

Automatic date formatting for different locales with configurable month and day names.

Date constraints

Set minimum and maximum dates, disable specific days of the week, or block certain dates.

​
Available components

​
Calendar

The basic calendar component with month view, date selection, and marking support. 
import {Calendar} from 'react-native-calendars';

<Calendar
  onDayPress={day => {
    console.log('selected day', day);
  }}
  markedDates={{
    '2024-03-15': {selected: true, selectedColor: 'blue'}
  }}
/>

​
CalendarList

A scrollable list of calendars that allows users to scroll through months vertically or horizontally. 
import {CalendarList} from 'react-native-calendars';

<CalendarList
  pastScrollRange={12}
  futureScrollRange={12}
  horizontal={true}
  pagingEnabled
/>

​
Agenda

A calendar combined with a scrollable list of events and appointments. 
import {Agenda} from 'react-native-calendars';

<Agenda
  items={{
    '2024-03-15': [{name: 'Meeting at 10am'}],
    '2024-03-16': [{name: 'Lunch with team'}]
  }}
  renderItem={(item) => <View><Text>{item.name}</Text></View>}
/>

​
ExpandableCalendar

An expandable calendar with week view that can be collapsed and expanded. 
import {ExpandableCalendar, CalendarProvider} from 'react-native-calendars';

<CalendarProvider date='2024-03-15'>
  <ExpandableCalendar />
</CalendarProvider>

​
Get started

Installation

Install the package and set up your project

Quick start

Build your first calendar in minutes

​
Platform compatibility

React Native Calendars is compatible with both iOS and Android. It also works seamlessly with Expo projects without ejecting.

​
Community and support

React Native Calendars is an open-source project maintained by Wix and the community. For issues, feature requests, or contributions, visit the GitHub repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us