2022-03-16 22:41:25 +02:00
[](https://stand-with-ukraine.pp.ua)
2022-03-16 22:30:38 +02:00
2020-01-21 11:32:50 +02:00
# React Native Calendars 🗓️ 📆
2021-12-30 10:19:48 +02:00
2023-03-20 02:19:18 -04:00
## A declarative cross-platform React Native calendar component for iOS and Android.
2018-04-12 12:50:42 +03:00
[](https://www.npmjs.com/package/react-native-calendars)
2024-09-18 10:59:25 +03:00
[](https://buildkite.com/wix-mobile-oss/react-native-calendars)
2023-03-20 02:19:18 -04:00
<br>
This module includes information on how to use this customizable **React Native ** calendar component.
The package is compatible with both **Android ** and **iOS **
<br>
2023-03-20 14:50:03 +02:00
> ### **Official documentation**
>
2023-03-21 09:39:00 +02:00
> This README provides basic examples of how to get started with `react-native-calendars`. For detailed information, refer to the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro).
2017-05-09 10:39:28 +03:00
2023-03-20 02:19:18 -04:00
## Features ✨
2022-02-02 12:50:08 +02:00
2023-03-20 14:50:03 +02:00
- 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
2016-11-11 17:32:04 +02:00
2023-03-20 02:19:18 -04:00
## Try it out ⚡
You can run a sample module using these steps:
2016-11-11 17:32:04 +02:00
2017-05-08 16:40:54 +03:00
```
2017-05-09 14:30:30 +03:00
$ git clone git@github.com:wix/react-native-calendars.git
2023-03-20 02:19:18 -04:00
2021-09-09 16:28:10 +02:00
$ cd react-native-calendars
2023-03-20 02:19:18 -04:00
2024-09-18 10:59:25 +03:00
$ yarn install
2023-03-20 02:19:18 -04:00
2021-09-09 16:28:10 +02:00
$ cd ios && pod install && cd ..
2023-03-20 02:19:18 -04:00
2017-05-08 16:40:54 +03:00
$ react-native run-ios
```
2017-05-09 10:43:59 +03:00
You can check example screens source code in [example module screens ](https://github.com/wix-private/wix-react-native-calendar/tree/master/example/src/screens )
2017-08-02 16:47:53 -03:00
This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo ](https://expo.io/@community/react-native-calendars-example )
2017-06-23 00:45:12 +02:00
2023-03-20 02:19:18 -04:00
## Getting Started 🔧
Here's how to get started with react-native-calendars in your React Native project:
### Install the package:
2022-10-31 10:11:13 +01:00
```
$ yarn add react-native-calendars
```
2023-03-20 02:19:18 -04:00
**RN Calendars is implemented in JavaScript, so no native module linking is required. **
2017-05-08 16:40:54 +03:00
2023-03-20 02:19:18 -04:00
## Usage 🚀
2023-03-20 14:50:03 +02:00
2023-03-20 02:19:18 -04:00
Basic usage examples of the library
2017-05-08 16:52:32 +03:00
2023-03-21 09:39:00 +02:00
##### **For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/Intro)**
2023-03-20 14:50:03 +02:00
2023-03-20 02:19:18 -04:00
### Importing the `Calendar` component
2017-05-09 10:37:18 +03:00
2023-03-20 02:19:18 -04:00
``` javascript
2024-07-23 18:24:00 +08:00
import { Calendar , CalendarList , Agenda } from 'react-native-calendars' ;
2023-03-20 02:19:18 -04:00
```
2023-03-20 14:50:03 +02:00
2023-03-20 02:19:18 -04:00
### Use the `Calendar` component in your app:
2017-05-09 10:37:18 +03:00
2021-06-27 14:21:14 +03:00
``` javascript
2023-03-20 02:19:18 -04:00
< Calendar
2023-03-20 14:50:03 +02:00
onDayPress = { day => {
console . log ( 'selected day' , day ) ;
} }
2023-03-20 02:19:18 -04:00
/ >
2017-05-09 10:37:18 +03:00
```
2023-03-20 02:19:18 -04:00
## Some Code Examples
2023-03-20 14:50:03 +02:00
Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:
2017-05-14 13:46:18 +03:00
2023-03-20 02:19:18 -04:00
### Creating a basic calendar with default settings:
2023-03-20 14:50:03 +02:00
2023-03-20 02:19:18 -04:00
``` javascript
2023-03-20 14:50:03 +02:00
import React , { useState } from 'react' ;
import { Calendar , LocaleConfig } from 'react-native-calendars' ;
2023-03-20 02:19:18 -04:00
const App = ( ) => {
const [ selected , setSelected ] = useState ( '' ) ;
return (
< Calendar
2023-03-20 14:50:03 +02:00
onDayPress = { day => {
2023-03-20 02:19:18 -04:00
setSelected ( day . dateString ) ;
} }
markedDates = { {
2023-03-20 14:50:03 +02:00
[ selected ] : { selected : true , disableTouchEvent : true , selectedDotColor : 'orange' }
2023-03-20 02:19:18 -04:00
} }
/ >
) ;
} ;
export default App ;
```
### Customize the appearance of the calendar:
2023-03-20 14:50:03 +02:00
2023-03-20 02:19:18 -04:00
``` javascript
< 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
2023-03-20 14:50:03 +02:00
onDayPress = { day => {
console . log ( 'selected day' , day ) ;
} }
2023-03-20 02:19:18 -04:00
// Mark specific dates as marked
markedDates = { {
'2012-03-01' : { selected : true , marked : true , selectedColor : 'blue' } ,
'2012-03-02' : { marked : true } ,
2023-03-20 14:50:03 +02:00
'2012-03-03' : { selected : true , marked : true , selectedColor : 'blue' }
2023-03-20 02:19:18 -04:00
} }
/ >
```
### Configuring the locale:
2023-03-20 14:50:03 +02:00
2017-05-14 13:46:18 +03:00
``` javascript
import { LocaleConfig } from 'react-native-calendars' ;
2023-03-20 14:50:03 +02:00
import React , { useState } from 'react' ;
import { Calendar , LocaleConfig } from 'react-native-calendars' ;
2017-05-14 13:46:18 +03:00
LocaleConfig . locales [ 'fr' ] = {
2021-12-30 10:19:48 +02:00
monthNames : [
'Janvier' ,
'Février' ,
'Mars' ,
'Avril' ,
'Mai' ,
'Juin' ,
'Juillet' ,
'Août' ,
'Septembre' ,
'Octobre' ,
'Novembre' ,
'Décembre'
2023-03-20 14:50:03 +02:00
] ,
2021-12-30 10:19:48 +02:00
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"
2017-05-14 13:46:18 +03:00
} ;
2023-03-20 02:19:18 -04:00
LocaleConfig . defaultLocale = 'fr' ;
2017-05-08 16:40:54 +03:00
2023-03-20 02:19:18 -04:00
const App = ( ) => {
const [ selected , setSelected ] = useState ( '' ) ;
return (
< Calendar
2023-03-20 14:50:03 +02:00
onDayPress = { day => {
2023-03-20 02:19:18 -04:00
setSelected ( day . dateString ) ;
} }
markedDates = { {
2023-03-20 14:50:03 +02:00
[ selected ] : { selected : true , disableTouchEvent : true , selectedDotColor : 'orange' }
2023-03-20 02:19:18 -04:00
} }
/ >
) ;
} ;
2017-05-08 18:17:53 +03:00
2023-03-20 02:19:18 -04:00
export default App ;
```
2017-05-08 17:34:23 +03:00
2023-03-20 02:19:18 -04:00
### Adding a global theme to the calendar:
2023-03-20 14:50:03 +02:00
2017-05-08 17:26:46 +03:00
``` javascript
2023-03-20 02:19:18 -04:00
< Calendar
style = { {
borderWidth : 1 ,
borderColor : 'gray' ,
height : 350 ,
} }
theme = { {
backgroundColor : '#ffffff' ,
calendarBackground : '#ffffff' ,
textSectionTitleColor : '#b6c1cd' ,
selectedDayBackgroundColor : '#00adf5' ,
selectedDayTextColor : '#ffffff' ,
todayTextColor : '#00adf5' ,
dayTextColor : '#2d4150' ,
2024-09-18 10:59:25 +03:00
textDisabledColor : '#dd99ee'
} }
2025-05-29 18:47:59 +08:00
/ >
2017-05-08 17:34:23 +03:00
```
2023-03-20 14:50:03 +02:00
2023-03-20 02:19:18 -04:00
## Customized Calendar Examples
2017-05-08 17:34:23 +03:00
2023-03-20 02:19:18 -04:00
### Calendar
2017-08-17 16:52:56 +03:00
2023-03-20 14:50:03 +02:00
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true">
2017-08-03 09:45:20 +03:00
2023-03-20 02:19:18 -04:00
### Dot marking
2017-05-09 11:43:42 +03:00
2023-03-20 14:50:03 +02:00
<img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">
2017-11-17 13:54:17 +04:00
2023-03-20 02:19:18 -04:00
### Multi-Dot marking
2017-10-25 11:58:43 +07:00
2021-12-30 10:19:48 +02:00
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true">
2017-10-25 11:58:43 +07:00
2023-03-20 02:19:18 -04:00
### Period Marking
2017-08-03 09:45:20 +03:00
2021-12-30 10:19:48 +02:00
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true">
2017-05-09 11:43:42 +03:00
2021-12-30 10:19:48 +02:00
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true">
2017-05-09 11:42:22 +03:00
2023-03-20 02:19:18 -04:00
### Multi-Period marking
2017-05-08 17:34:23 +03:00
2021-12-30 10:19:48 +02:00
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true">
2018-04-15 13:30:00 +02:00
2023-03-20 02:19:18 -04:00
### Custom marking
2018-04-15 13:30:00 +02:00
2021-12-30 10:19:48 +02:00
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true">
<img height=350 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true">
2017-08-03 09:44:01 +03:00
2023-03-20 02:19:18 -04:00
### Date loading indicator
2017-05-08 17:34:23 +03:00
2021-12-30 10:19:48 +02:00
<img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true">
2017-11-23 13:27:17 +02:00
2023-03-20 02:19:18 -04:00
### Scrollable semi-infinite calendar
2017-11-23 13:27:17 +02:00
2021-12-30 10:19:48 +02:00
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar-list.gif?raw=true">
2017-05-09 11:42:22 +03:00
2023-03-20 02:19:18 -04:00
### Horizontal calendar
2017-05-08 16:40:54 +03:00
2021-12-30 10:19:48 +02:00
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/horizontal-calendar-list.gif?raw=true">
2018-03-26 16:06:00 +02:00
2017-05-11 12:36:11 +03:00
### Agenda
2021-12-30 10:19:48 +02:00
<img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/agenda.gif?raw=true">
2017-05-09 13:27:58 +03:00
2023-03-20 02:19:18 -04:00
<br>
2017-05-09 13:27:58 +03:00
## Authors
2021-12-30 10:19:48 +02:00
- [Tautvilas Mecinskas ](https://github.com/tautvilas/ ) - Initial code - [@tautvilas ](https://twitter.com/Tautvilas )
- Katrin Zotchev - Initial design - [@katrin_zot ](https://twitter.com/katrin_zot )
2017-05-09 13:27:58 +03:00
See also the list of [contributors ](https://github.com/wix/react-native-calendar-components/contributors ) who participated in this project.
2017-05-09 13:42:39 +03:00
## Contributing
2023-03-20 14:50:03 +02:00
We welcome contributions to react-native-calendars.
2023-03-20 02:19:18 -04:00
2023-03-20 14:50:03 +02:00
If you have an idea for a new feature or have discovered a bug, please open an issue.
2023-03-20 02:19:18 -04:00
2024-09-18 10:59:25 +03:00
Please `yarn test` and `yarn lint` before pushing changes.
2023-03-20 02:19:18 -04:00
2023-03-20 14:50:03 +02:00
Don't forget to add a **title ** and a **description ** explaining the issue you're trying to solve and your proposed solution.
2023-03-20 02:19:18 -04:00
2023-03-20 14:50:03 +02:00
Screenshots and Gifs are VERY helpful to add to the PR for reviews.
2023-03-20 02:19:18 -04:00
Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.
## License
React Native Calendars is MIT licensed
