Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,596 Commits
.buildkite		.buildkite
.bundle		.bundle
.github		.github
android		android
demo/assets		demo/assets
docsRNC		docsRNC
e2e		e2e
example		example
ios		ios
scripts		scripts
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
.yarnrc		.yarnrc
.yarnrc.yml		.yarnrc.yml
Gemfile		Gemfile
Gemfile.lock		Gemfile.lock
ISSUE_TEMPLATE.md		ISSUE_TEMPLATE.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
detox.config.js		detox.config.js
index.android.js		index.android.js
index.ios.js		index.ios.js
jest.config.js		jest.config.js
metro.config.js		metro.config.js
package.json		package.json
pom.xml		pom.xml
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

React Native Calendars 🗓️ 📆

A declarative cross-platform React Native calendar component for iOS and Android.

This module includes information on how to use this customizableReact Native calendar component.

The package is compatible with bothAndroid andiOS

Official documentation
This README provides basic examples of how to get started withreact-native-calendars. For detailed information, refer to theofficial documentation site.

Features ✨

Pure JS. No Native code required
Date marking - dot, multi-dot, period, multi-period and custom marking
Customization of style, content (days, months, etc) and dates
Detailed documentation and examples
Swipeable calendar with flexible custom rendering
Scrolling to today, selecting dates, and more
Allowing or blocking certain dates
Accessibility support
Automatic date formatting for different locales

Try it out ⚡

You can run a sample module using these steps:

$ git clone git@github.com:wix/react-native-calendars.git$ cd react-native-calendars$ yarn install$ cd ios && pod install && cd ..$ react-native run-ios

You can check example screens source code inexample module screens

This project is compatible with Expo/CRNA (without ejecting), and the examples have beenpublished on Expo

Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

Install the package:

$ yarn add react-native-calendars

RN Calendars is implemented in JavaScript, so no native module linking is required.

Usage 🚀

Basic usage examples of the library

For detailed information on using this component, see theofficial documentation site

Importing the`Calendar` component

import{Calendar,CalendarList,Agenda}from'react-native-calendars';

Use the`Calendar` component in your app:

<CalendaronDayPress={day=>{console.log('selected day',day);}}/>

Some Code Examples

Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:

Creating a basic calendar with default settings:

importReact,{useState}from'react';import{Calendar,LocaleConfig}from'react-native-calendars';constApp=()=>{const[selected,setSelected]=useState('');return(<CalendaronDayPress={day=>{setSelected(day.dateString);}}markedDates={{[selected]:{selected:true,disableTouchEvent:true,selectedDotColor:'orange'}}}/>);};exportdefaultApp;

Customize the appearance of the calendar:

<Calendar// Customize the appearance of the calendarstyle={{borderWidth:1,borderColor:'gray',height:350}}// Specify the current datecurrent={'2012-03-01'}// Callback that gets called when the user selects a dayonDayPress={day=>{console.log('selected day',day);}}// Mark specific dates as markedmarkedDates={{'2012-03-01':{selected:true,marked:true,selectedColor:'blue'},'2012-03-02':{marked:true},'2012-03-03':{selected:true,marked:true,selectedColor:'blue'}}}/>

Configuring the locale:

import{LocaleConfig}from'react-native-calendars';importReact,{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'],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';constApp=()=>{const[selected,setSelected]=useState('');return(<CalendaronDayPress={day=>{setSelected(day.dateString);}}markedDates={{[selected]:{selected:true,disableTouchEvent:true,selectedDotColor:'orange'}}}/>);};exportdefaultApp;

Adding a global theme to the calendar:

<Calendarstyle={{borderWidth:1,borderColor:'gray',height:350,}}theme={{backgroundColor:'#ffffff',calendarBackground:'#ffffff',textSectionTitleColor:'#b6c1cd',selectedDayBackgroundColor:'#00adf5',selectedDayTextColor:'#ffffff',todayTextColor:'#00adf5',dayTextColor:'#2d4150',textDisabledColor:'#dd99ee'}}/>