React-native-calendars: CalendarList does not implement `onMonthChange`

[FabianMeul]

Description

The component README.md describes the following;

<CalendarList /> is scrollable semi-infinite calendar composed of <Calendar /> components. Currently it is possible to scroll 4 years back and 4 years to the future. All paramters that are available for <Calendar /> are also available for this component.

Expected Behavior

Implementing <CalendarList onMonthChange={} /> triggers the callback when the active month is changed by either a swipe, of a press of the header buttons.

Observed Behavior

The callback is not fired. The source code of the CalendarList also provides no reference to an onMonthCallback whatsoever.

Environment

• [email protected]
• [email protected]

[bansawbanchee]

The method to use is: onVisibleMonthsChange={(months) => {console.log('now these months are visible', months)}}.

Also ...Calendar.PropTypes are a part of CalendarList. I've linked you to the line number in the source code as well below.

https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.js#L17

Example from the docs with onVisibleMonthChange added.
````
import React, { Component } from 'react';

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

export default class HorizontalCalendarList extends Component {
constructor(props) {
super(props);
}

render() {
return (

//current={'2012-05-16'}
pastScrollRange={24}
futureScrollRange={24}
horizontal
pagingEnabled
onVisibleMonthsChange={(months) => {alert('now these months are visible', months)}}
style={{borderBottomWidth: 1, borderBottomColor: 'black'}}
/>

);
}
}
````

[victorsilent]

The method to use is: onVisibleMonthsChange={(months) => {console.log('now these months are visible', months)}}.

Also ...Calendar.PropTypes are a part of CalendarList. I've linked you to the line number in the source code as well below.

https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.js#L17

Example from the docs with onVisibleMonthChange added.

import React, { Component } from 'react';

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

export default class HorizontalCalendarList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View>
        <CalendarList
          //current={'2012-05-16'}
          pastScrollRange={24}
          futureScrollRange={24}
          horizontal
          pagingEnabled
          onVisibleMonthsChange={(months) => {alert('now these months are visible', months)}}
          style={{borderBottomWidth: 1, borderBottomColor: 'black'}}
        />
      </View>
    );
  }
}

CalendarList has the onMonthChange props, but never call it, and the onVisibleMonthsChange are a little bit trickier because sometimes you have two months or one month and you don't know which month you will do the action

[FabianMeul]

What @victorsilent said.

The question is not really about how to solve not having the callback, but rather that the documentation is just plain wrong in stating that all the properties are also available and usable on CalendarList.

As @victorsilent stated, the onMonthChange prop exists but is never called.
I don't really see a reason why it wouldn't be called. 😄

[ding991]

@FabianMeul
Now I have also encountered this problem，Can tell me how you solved this problem?
Thanks!

[anhtuank7c]

I think onVisibleMonthsChange should passing scroll direction beside months.
something should based on horizontal or vertical
I don't know which month is visible month in months :(

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.