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

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

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

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

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:

Hi,

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

Thanks.

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

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

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

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

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

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.

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

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

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.

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?

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

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.

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??

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.

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.

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?

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

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

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

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

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?

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. :-)

did you consider using FlatList instead of ListView?

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;

Is there anyway to override styles of knob of agenda ?

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.

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.

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

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.

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!

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!

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

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?

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

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

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.

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.

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

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

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.

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

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.

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",

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