wix / react-native-calendars

React Native Calendar Components 🗓️ 📆

React Native Calendars 🗓️ 📆

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

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.

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 [email protected]: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

Getting Started 🔧

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

Install the package:

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.

Usage 🚀

Basic usage examples of the library

For detailed information on using this component, see the official documentation site

Importing the Calendar component

import {`[Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda)`} from 'react-native-calendars';

Use the Calendar component in your app:

<Calendar
  onDayPress={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:

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;

Customize the appearance of the calendar:

<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'}
  }}
/>

Configuring the locale:

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;

Adding a global theme to the calendar:

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

Customized Calendar Examples

Calendar

Dot marking

Multi-Dot marking

Period Marking

Multi-Period marking

Custom marking

Date loading indicator

Scrollable semi-infinite calendar

Horizontal calendar

Agenda

Authors

• Tautvilas Mecinskas - Initial code - @tautvilas
• Katrin Zotchev - Initial design - @katrin_zot

See also the list of contributors who participated in this project.

Contributing

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.

License

React Native Calendars is MIT licensed

react-native-calendars's Issues

Use FlatList instead of ListView

did you consider using FlatList instead of ListView?

Single/double digit day and month inconsitency

If I select any date where the day or month is below 10 (1st of January 2017 for example), the onDayPress event returns single digits for the day and month properties.

The selected property however, does not accept dates such as "2017-1-1", it needs them to be in the double digit format, for example "2017-01-01".

For my use case, I am saving the selected date and having to manually add the "0" in front of days and months that are below 10, so that I can keep the selected date state, which is not ideal.

const prefixZeroToNumber = number => ((number < 10) ? `` 0${number} `` : number);

I don't know whether the best solution is to change the selected property to accept single digit numbers, or have the onDayPress event parameter output the double digit number, but I feel like this will be a common use case that people will have to work around.

Is this working on React-native V0.45.1?

I create new project and try to add this component it does not work? But earlier (V 0.44) it is working?

control row height

Is there a way to control row height? Something we can set in theme prop?

Remove border radius / use custom day component?

Hi! I'm trying to make the selected day a box, with no radius. I'm not sure I can just outright change the styles for this? Can anyone please clarify this in the docs? Thanks!

Propagate text and base styles from theme to day and calendar

While theme can change some global properties of the calendar, it does not take into account the text and base styles.
For example:
theme={{
todayTextColor: 'red',
base: { width: 20, height: 20, justifyContent: 'center' },
text: { marginTop: 0, fontSize: 13.5, }
}}
only update the todayTextColor.
Also I noticed there's a default 32 width for the day box in calendar which can also needs to take the value from the theme base style.

Responsiveness of CalendarList scroll and clicking on dates

Hi,

There seems to be quite a lag in the scroll of the CalendarList. What seems to happen is while scrolling between months, the month detail will disappear and the month name will only be displayed. This seems to happen when scrolling quickly through the months.

The second issue with responsiveness is related to selecting days on a calendar. There seems to be quite a lag in the highlighting process while tapping on different days.

Are there any properties I could use to speed this up?

Thanks in advance for all your help.

set font family in theme

There's no way to set a custom font family for the text in the calendars. Maybe add a fontFamily attribute in the theme prop that will be applied to every text styles?

I'm creating a lot of issues... I can make a pull request if you want. Just let me know how you want to implement it.

Agenda knob styling

Is there anyway to override styles of knob of agenda ?

Allow to select year and month directly

I'd like to use this component for all date related needs but it looks it is not a practical fit for selecting dates too far in the past such as birthdays since it doesn't have support to select directly month and year. Having to select a date in the 1970's, 1980's, etc. by manually navigating month by month is not UX/time saving friendly.
Is there any plans to allow to select directly year and month?

Thank you in advance for your attention.

Compatibility with react-native-web

Hey there! 🙋 This calendar module looks awesome. We would like to use it in our react-native-web project but are running into an issue because of the .ios and .android file extensions for some of the assets. My suggestion is to provide a default for these assets so our Webpack build can resolve them.

The files that are giving us trouble are:

• src/calendar/img/previous.png
• src/calendar/img/next.png
• src/agenda/style.js

If you add these files, then we should be good to go! The only question now is whether we use iOS or Android styling as the default for the web - what do you all think?

cc @kkemple

markedDays overlap

Hello,

Is there an option to display 2 markedDays group for ex:

(1/5/2017 - 10/5/2017) AND (10/5/2017 - 15/5/2017). How can i do that? The 10/5/2017 is end date for the first group and start date for the second. Also is there an option to have a Thumbnail on the start days??

selectedDayBackgroundColor not work

i install version v1.2.15
selectedDayBackgroundColor not work
my current date ={'2017-05-24

'}
<CalendarList
current={this.state.currentDate}
onDayPress={(day) => {console.log('selected day', day)}}
onMonthChange={(month) => {console.log('month changed', month)}}
pastScrollRange={24}
futureScrollRange={24}
theme={{
calendarBackground: '#333248',
textSectionTitleColor: 'white',
dayTextColor: 'white',
todayTextColor: 'white',
selectedDayTextColor: 'green',
monthTextColor: 'white',
selectedDayBackgroundColor: 'green'
}}
/>

Cannot read property 'style' of undefined

Only after import it using `import { Calendar} from 'react-native-calendars;

and it's shows (Cannot read property 'style' of undefined ) and totally stopped

Disable days before today

There is a simple away to disable days before the current day?
Ex.: Disable all days before today

Or there is a milestone to implement that? Thanks.

Calendarlist does not re-render view when new marked dates are supplied

When I press a date in the CalendarList component, the date does not get visibly marked. This is due to the CalendarList not rendering it's subcomponents. When I scroll the selected date out of view, and roll it back into view it is visibly marked. This happens with the code below, but also with the example in this repository. This also happens to Calendar, of course, because CalendarList consists of Calendar components.

import React, { Component } from 'react'

import { CalendarList } from 'react-native-calendars'

export default class CalendarsList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      today: new Date(),
      markedDates: {}
    }
  }

  onDayPress = day => {
    const markedDates = this.state.markedDates
    const dateString = day.dateString

    if (markedDates.hasOwnProperty(dateString)) {
      delete markedDates[dateString]
    } else {
      markedDates[dateString] = { selected: true }
    }

    this.setState({ markedDates })
  }

  render() {
    const { today, markedDates } = this.state
    return (
      <CalendarList
        minDate={today}
        pastScrollRange={0}
        futureScrollRange={12}
        onDayPress={this.onDayPress}
        markedDates={markedDates}
      />
    )
  }
}

CalendarList not showing MarkedDates

Using some sample data to pass into the CalendarList component, yet the dates are not marked.

Component Render

<CalendarList   
  onDayPress={(day) => { console.log('selected day', day) }}
  markedDates={{
    '2017-05-24': { selected: true, marked: true },
    '2017-05-25': { marked: true },
    '2017-05-26': { disabled: true },
  }}
/>

Screenshot

Limit months to show.

Hi,

How to limit months to show on CalendarList . Like this (5/2017 -> 5/2018)

Thanks.

RenderItem's callback having an issue.

This is a reference to #58.

I am using the prop renderItem={(item, firstItemInDay) => {return ();}}

The callback works, but the problem is that it cuts on the first Item near the date.

My code is this:
renderItem(item,firstItemInDay) {
if(firstItemInDay){
return(

)
}
return (
<TouchableOpacity style={[styles.item, {height: item.height}]}>


{item.start} - {item.end}


{item.full_name}


);

}

Just returning an empty view hides an item that is next to the date.

On my screenshot, next to the date 8Thu there should be another appointment, but for some reason it does not display when using the callback. Am I doing something incorrect?

Thanks

Agenda expand month range.

Hi.awesome lib!
Is there any way to enable us to define the range of the agenda when it expand ? just like only showing one year. Thanks. :-)

Divider in the middle of the date in set of markedDates

I have issue with divider in the middle of the date in set of markedDates. Please see attach.

This is my markedDates:

markedDates={
{'2012-05-20': [{textColor: 'green'}],
'2017-06-07': [{startingDay: true, color: '#d4ff2a', textColor: 'black'}],
'2017-06-08': [{color: '#d4ff2a', textColor: 'black'}],
'2017-06-09': [{color: '#d4ff2a', textColor: 'black'}],
'2017-06-10': [{color: '#d4ff2a', textColor: 'black'}],
'2017-06-11': [{endingDay: true, color: '#d4ff2a', textColor: 'black'}],
'2017-06-20': [{startingDay: true, color: '#d4ff2a', textColor: 'black'}, {endingDay: true, color: '#d4ff2a', textColor: 'black'}]
}
}

My version is:
"react-native-calendars": "^1.4.0",

I have found temporary fix by adding marginRight: -1 and marginLeft: -1 for styles leftFiller and rightFiller in \node_modules\react-native-calendars\src\calendar\day\interactive\style.js

leftFiller: {
height: FILLER_HEIGHT,
flex: 1,
marginRight: -1
},
rightFiller: {
height: FILLER_HEIGHT,
flex: 1,
marginLeft: -1
},

But could you please address this issue in the next releases.
Thank you.

Agenda can be seen underneath whilst overscrolling

If you scroll to the beginning or the end in the calendar list view in the Agenda component, and overscroll, you can see the Agenda underneath.

[Android]The calendar alway return to selected Date when i slide calendar

I try use react-native-calendars in my android-device, but the component occured a PR in my android-device.

1.I selected 2017-5-24 in the calendar
2.I try slide up or slide down and want to select other Date
3.but the calendar alway return to 2017-5-24

Devices Version: Android4.3/Android 5.1.1
"react": "15.4.2",
"react-native": "^0.41.2",
"react-native-calendars": "^1.2.17",

Please add `dayName` to calendar object

Theming not working as intended

Hello, great component !

Changing the component's theme is not working as intended when using markingType="interactive". Days styles are not applied correctly (dayTextColor, todayTextColor, etc..). Here's two examples with markingType="interactive" and markingType="simple" and with only that prop changed.

markingType="simple"
markingType="interactive"

Here's my code:

<CalendarList
                    markedDates={markedDates}
                    onDayPress={this.onPress}
                    markingType="interactive" // markingType="simple"
                    theme={{
                        calendarBackground: '#333248',
                        textSectionTitleColor: 'white',
                        dayTextColor: 'white',
                        todayTextColor: 'white',
                        selectedDayTextColor: 'white',
                        monthTextColor: 'white',
                        selectedDayBackgroundColor: '#333248'
                    }}
              />

I checked the source code a bit, and if I understand correctly, the days are rendered by a different component if markingType="interactive". I'm guessing this other component is handling the theme prop incorrectly?

Documentation

There is some kind of documentation besides the README.md file?

How to setup a range of dates to show as selected

I must be missing something super simple. But using the example, when I set the markedDates like this:

markedDates={{
           '2012-05-21': [{startingDay: true, color: 'blue', selected: true}],
           '2012-05-24': [{endingDay: true, color: 'blue', selected: true}]
}}

Why aren't all the days from 5/21 - 5/24 selected and colored in Blue? When I run this all i see is are two days marked.

Thanks again for this component, I think its going to be what i need.

Disable a row of days (e.g. disable all Sundays)

How to disable a row of days, like all Sundays or all Saturdays?

Days do not line up on larger screens

As you can see from the screenshot, the days do not line up correctly on larger screens.

Update: Apologies, I realise I didn't actually give any context to this. This is the calendar view that you can see whilst in the Agenda.

Accept dayNamesShort repeated

I need to implement this:

Right now it is not possible because of this key:
https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.js#L83

I will send a pr to use the index of map instead

Agenda loading forever.

I created an <Agenda /> component with the code below, but the agenda show an spin loading forever. I created the project with create-react-native-app.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Facebook, WebBrowser } from 'expo';
import { Linking } from 'react-native';
import { Card, CardSection, Button } from './common';
import { loginWithFacebook } from '../actions';
import { Agenda } from 'react-native-calendars';

@connect(null, { loginWithFacebook })
class LoginStudent extends Component {
  static navigationOptions = {
    title: 'Login Student',
  };

  render() {
    return (
      <Agenda 
        items={{'2012-05-22': [{text: 'item 1 - any js object'}],
            '2012-05-23': [{text: 'item 2 - any js object'}],
            '2012-05-24': [],
            '2012-05-25': [{text: 'item 3 - any js object'}],
	}} 
        loadItemsForMonth={(mongh) => {console.log('trigger items loading')}}
        onDayPress={(day)=>{console.log('day pressed')}}
				selected={'2012-05-16'} 
        renderItem={item => <View />}
        renderDay={(day, item) => <View />}
        renderEmptyDate={() => <View />}
        rowHasChanged={(r1, r2) => (r1.text !== r2.text)}
        hideKnob={true}
        theme={{}}
        style={{}}
       />
    );
  }
}

export default LoginStudent;

Mark dates automatically

I want to be able to select a start date and end date and then all the dates in between are marked automatically.
I am thinking if we could be able to pass a prop to the calendar component to allow such behaviour or is the functionality currently implemented.
Thanks and Keep up the good work.

Adding a single Icon to a date row in Agenda

Hello,

I really appreciate this plugin. It's really amazing. I am just having trouble with adding a plus Icon using the Agenda component. I would like to have a plus Icon rendered once per day. As of now, I am able to get the Icon to display, but the problem is that it displays a plus Icon for every appointment. I know it's in a loop and I probably could get it to work with a bit of logic, but I was wondering if there might be a simpler way of achieving this. Hopefully, I am clear, but I have added . a picture on what I am trying to acheive.

https://blog-setmore.storage.googleapis.com/android_wheely.gif

How to block only one day

Need to block only one date or multiple dates !!!! ???

Use only js based packages for example

What do you think of refactor the example to use create-react-native-app, and use react-navigation instead of react-native-navigation

I have this error when running the example:

RCCManager.h file not found

Calendar List not showing inside react-navigation StackNavigator

Hi, I'm trying to create a CalendarList after I click on a button. So, I decided to navigate the view to FilterDateScreen.js using StackNavigator react-navigation and show a CalendarList.

Here is my Code inside FilterDateScreen.js

<CalendarList onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}} pastScrollRange={50} futureScrollRange={50} scrollEnabled />

It shows nothing inside FilterDateScreen until I scroll it a bit. I have test it without using any react-navigation StackNavigator and it works fine (no scroll is needed). What am i missing?

Timeline visualization

Hey, thank you for this, it is an awesome project!

I was wondering if there would be a possibility to add something like Google Calendar's timeline visualization:

How to call scrollToDay() method to set the today's day in Agenda View?

Hi,

I am very new to React native and working on Calendar App. I really like this calendar Agenda view.
I want to set the today's date on button click in Agenda view or move to a different month -
https://hub.mangoapps.com/sf/ODcxNzZfMTMyNzE0NQ .

Is it possible to set the date?

Error caused when scrolling to empty day

Summary

If you select a date with items and then scroll to an empty date the day prop becomes undefined and causes an error. See screenshot / gif

P.S.

I'm also unable to set the renderEmptyDate option within the component, all I see is a loading spinner. We're using the following:

renderEmptyDate={() => { return (<Text>There are no events</Text>) }}

Any help would be appreciated, thanks for your time and effort

Selecting/Unselecting multiple days.

Hey,

Love the calendar! :)

One issue though. I'm trying to implement it so the user can select certain dates for an event they're hosting.

Now, selecting dates works great but unselecting seems to be an issue:

https://www.dropbox.com/s/u95gkubrtrmjul0/calendar-issue.mov?dl=0

I've made a quick video.

My calendar implementation looks like this:

<Calendar
current={'2017-05-16'}
minDate={'2017-05-10'}
maxDate={'2017-05-29'}
firstDay={1}
selected={ this.state.marked }
onDayPress={ day => this.onSelect( day ) }

this.onSelect() just changes the array. The updating for adding/removing dates works correctly however the calendar is not updating accordingly.

Is this something that should be working?

Thanks!

Flow and proptypes

What do you think of adding proptypes and flow types for this package?

How to disable days

For example, disabled 4th, 7th, 22th in May.

i18n for months and week days

Currently there is no way to change the locale for months and weekdays. Defaults are in english.

Possible solutions suggestions:

Add a monthNamesHash (or only monthNames) prop that would map the english months to user defined ones. (ex.: { 'January': 'Janvier', 'February': 'Février', ... }). Same thing for weekdays (ex.: { 'Sun': 'Dim', 'Mon': 'Lun', ...}). Then use those hash in CalendarHeader.

Or

Add a locale prop to the calendar component. (ex.: 'en' | 'fr' | 'de' , default: 'en'), add supported locales to XDate configuration, then use the locale when formatting the months and weekdays in CalendarHeader. Example

undefined is not and object (evaluating '_props[registrationName]')

On android with RN0.43.4. Just trying out the example.
I was using exactly the same code as the example in AgendaScreen. When I press the date on top of the agenda list, the above error shown.

I've found that only when I touch the Text area the error will occur. Try avoid the text when touching the date and there will be NO error.

Probably related to this http://stackoverflow.com/questions/43674781/undefined-is-not-and-object-evaluating-propsregistrationname

Some way of setup a recurrent date?

I would like to mark all Mondays in the calendar until 2018

Readme Issue

Please review your readme. There are a ton of typos and missing brackets.
Your product is really appreciated though ;)

Background color day not work

I'm touching on some days in the calendar, but they are not imediately changing the background colors. It only updates the colors when I change the month back and forth.

`<Calendar
current={minDate}
minDate={minDate}
maxDate={maxDate}
displayLoadingIndicator
onDayPress={this.onDayPress}
markedDates={datesMarked}
theme={{
calendarBackground: '#ffffff',
textSectionTitleColor: '#b6c1cd',
selectedDayBackgroundColor: '#7AD8FB',
selectedDayTextColor: '#ffffff',
todayTextColor: '#7AD8FB',
dayTextColor: '#2d4150',
textDisabledColor: '#d9e1e8',
dotColor: '#7AD8FB',
selectedDotColor: '#ffffff',
base: { width: 20, height: 20, justifyContent: 'center' },
text: { marginTop: 0, fontSize: 8.5, }
}}
hideExtraDays={true}
markingType={'interactive'}
/>

`

VIDEO EXAMPLE

Thanks.

set all dates "disabled" except those marked dates

Use-case

Possible to set all dates "disabled" except those marked dates configured?

Something similar to https://github.com/wix/react-native-calendars#date-marking, the differences are:

• all dates are disabled (will not response to user click)
• except those marked dates configured will be enabled.

<Calendar 
  // Collection of dates that have to be marked. Default = {}
  markedDates={{
    '2012-03-16': {marked: true},
    '2012-05-03': {marked: true},
    '2012-06-28': {disabled: true}
  }}
/>

Any plan for providing gesture?

Is there any plan for providing gesture support ? such as swipe down to expand the agenda ?

CalendarList not interactive?

I'm trying to use an interactive CalendarList, but it doesn't seem to work?

 <CalendarList
     onDayPress={(day) => { console.log('selected day', day); }}
     pastScrollRange={0}
     futureScrollRange={12}
     scrollEnabled
     markingType={'interactive'}
     />

This is all of my code. When I tap a day, it logs properly but nothing in the UI changes. Any ideas?