React Native Calendar Components
React Native Calendars is a versatile and powerful npm package designed to simplify the integration of calendar functionality into React Native applications. This module offers a range of customizable and ready-to-use Calendar components that cater to various needs, from basic date pickers to more complex agenda and scheduling views. With React Native Calendars, developers can easily implement features like marking dates, period selection, and displaying multi-dot indicators, making it an ideal choice for applications requiring dynamic calendar capabilities. The package supports both Android and iOS, ensuring a consistent look and user experience across platforms.
To start using React Native Calendars in your project, simply run the command `npm install react-native-calendars` in your project directory. This command fetches and installs the latest version of React Native Calendars, adding robust calendar functionality to your application with minimal setup. Once installed, developers can utilize various props and methods provided by the package to customize the calendar components according to their specific needs. Whether you're building an event management app, a booking system, or just need a simple date picker, this command is your gateway to enhancing your app with sophisticated calendar features.
React Native Calendars is continually updated and maintained by a dedicated community of developers, ensuring it stays reliable and up-to-date with the latest React Native versions and best practices. The package's extensive documentation and examples make it accessible for both new and experienced developers, allowing for quick integration and troubleshooting. By using React Native Calendars, developers not only save time and resources but also enhance the user experience by providing a smooth and interactive calendar interface. This makes React Native Calendars a must-have tool in the arsenal of any developer looking to add calendar functionality to their React Native apps.
Core dependencies of this npm package and its dev dependencies.
hoist-non-react-statics, lodash, memoize-one, prop-types, react-native-swipe-gestures, recyclerlistview, xdate, @babel/core, @babel/eslint-parser, @babel/preset-env, @babel/runtime, @react-native-community/eslint-config, @testing-library/react-native, @tsconfig/docusaurus, @tsconfig/react-native, @types/jest, @types/lodash, @types/react, @types/react-test-renderer, @types/react-native, @types/xdate, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @welldone-software/why-did-you-render, babel-eslint, babel-jest, detox, eslint, eslint-config-prettier, eslint-plugin-jest, eslint-plugin-react, eslint-plugin-react-native, husky, jest, jest-date-mock, lint-staged, metro-react-native-babel-preset, mocha, prettier, react, react-component-driver, react-native, react-native-navigation, react-recipes, react-test-renderer, reassure, semver, shell-utils, typescript
A README file for the react-native-calendars code repository. View Code
This module includes information on how to use this customizable React Native calendar component.
The package is compatible with both Android and iOS
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.
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
This project is compatible with Expo/CRNA (without ejecting), and the examples have been published on Expo
Here's how to get started with react-native-calendars in your React Native project:
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.
Basic usage examples of the library
Calendar
componentimport {`[Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda)`} from 'react-native-calendars';
Calendar
component in your app:<Calendar
onDayPress={day => {
console.log('selected day', day);
}}
/>
Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:
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;
<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'}
}}
/>
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'
],
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;
import React, { useState } from 'react';
import { Calendar, LocaleConfig } from 'react-native-calendars';
const App = () => {
const [selected, setSelected] = useState('');
return (
<Calendar
style={{
borderWidth: 1,
borderColor: 'gray',
height: 350,
}}
theme={{
backgroundColor: '#ffffff',
calendarBackground: '#ffffff',
textSectionTitleColor: '#b6c1cd',
selectedDayBackgroundColor: '#00adf5',
selectedDayTextColor: '#ffffff',
todayTextColor: '#00adf5',
dayTextColor: '#2d4150',
textDisabledColor: '#d9e
See also the list of contributors who participated in this project.
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 npm run test
and npm run 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.
React Native Calendars is MIT licensed