New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calendar is working good in iOS but for android it has bug in initial month view. #43

Closed
devekoperiOS opened this Issue Jun 22, 2016 · 11 comments

Comments

Projects
None yet
7 participants
@devekoperiOS

I am trying to use calendar in iOS and android apps. But in android app, its seems to be error in initial month. Its setting date form wrong day. If I click on next or prev and then come back to initial screen, then it fixes. What might be missing in setting up initial month view?

@devekoperiOS

This comment has been minimized.

Show comment
Hide comment
@devekoperiOS

devekoperiOS Jun 22, 2016

I have removed "scrollEnabled={true}" from calendar tag and it worked. I wrote the following.
<Calendar
ref="calendar"
scrollEnabled={true}
showControls={true}
dayHeadings={customDayHeadings}
titleFormat={'MMMM YYYY'}
prevButtonText={'Prev'}
nextButtonText={'Next'}
onDateSelect={(date) => this.setState({selectedDate: date})}
onTouchPrev={() => console.log('Back TOUCH')}
onTouchNext={() => console.log('Forward TOUCH')}
onSwipePrev={() => console.log('Back SWIPE')}
onSwipeNext={() => console.log('Forward SWIPE')}/>

I have removed "scrollEnabled={true}" from calendar tag and it worked. I wrote the following.
<Calendar
ref="calendar"
scrollEnabled={true}
showControls={true}
dayHeadings={customDayHeadings}
titleFormat={'MMMM YYYY'}
prevButtonText={'Prev'}
nextButtonText={'Next'}
onDateSelect={(date) => this.setState({selectedDate: date})}
onTouchPrev={() => console.log('Back TOUCH')}
onTouchNext={() => console.log('Forward TOUCH')}
onSwipePrev={() => console.log('Back SWIPE')}
onSwipeNext={() => console.log('Forward SWIPE')}/>

@vincentfretin

This comment has been minimized.

Show comment
Hide comment
@vincentfretin

vincentfretin Jun 23, 2016

I saw the same issue yesterday. Please reopen, this is a workaround, not a fix.
I still have the issue with RN 0.28 on android. We are in june and on the first load, it goes to april but with the title of june. And indeed, if scrollEnabled is false, the issue goes away.
I think the issue may be in scrollEnded function. If somebody want to look at it.

I saw the same issue yesterday. Please reopen, this is a workaround, not a fix.
I still have the issue with RN 0.28 on android. We are in june and on the first load, it goes to april but with the title of june. And indeed, if scrollEnabled is false, the issue goes away.
I think the issue may be in scrollEnded function. If somebody want to look at it.

@vincentfretin

This comment has been minimized.

Show comment
Hide comment
@vincentfretin

vincentfretin Jun 23, 2016

Another issue I found on android is that when I swipe to go to next month, it decrements the month instead of incrementing it. I think it may be related.

Another issue I found on android is that when I swipe to go to next month, it decrements the month instead of incrementing it. I think it may be related.

@mCodex

This comment has been minimized.

Show comment
Hide comment
@mCodex

mCodex Jun 23, 2016

@devekoperiOS I realize the same thing yesterday.

mCodex commented Jun 23, 2016

@devekoperiOS I realize the same thing yesterday.

@devekoperiOS

This comment has been minimized.

Show comment
Hide comment
@devekoperiOS

devekoperiOS Jun 24, 2016

Temporary solution can be disabling scrolling.

Temporary solution can be disabling scrolling.

@mCodex

This comment has been minimized.

Show comment
Hide comment
@mCodex

mCodex Jun 24, 2016

Yes, thank you!

mCodex commented Jun 24, 2016

Yes, thank you!

@KGALLET

This comment has been minimized.

Show comment
Hide comment
@KGALLET

KGALLET Jun 27, 2016

Contributor

It seems that i've got the same issue on iOS real device.
Disabling scrolling temporary fixed it.

Contributor

KGALLET commented Jun 27, 2016

It seems that i've got the same issue on iOS real device.
Disabling scrolling temporary fixed it.

@nodegin

This comment has been minimized.

Show comment
Hide comment
@nodegin

nodegin Aug 13, 2016

removing scrollEnabled={true} fixed this issue, any solution?

nodegin commented Aug 13, 2016

removing scrollEnabled={true} fixed this issue, any solution?

@nodegin

This comment has been minimized.

Show comment
Hide comment
@nodegin

nodegin Aug 13, 2016

In addition I found that by adding showControls={true} the titleFormat will be broken too.

Without showControls the title shows August 2016, but with showControls the title shows Aug 2016

nodegin commented Aug 13, 2016

In addition I found that by adding showControls={true} the titleFormat will be broken too.

Without showControls the title shows August 2016, but with showControls the title shows Aug 2016

@MrToph

This comment has been minimized.

Show comment
Hide comment
@MrToph

MrToph Oct 6, 2016

Contributor

I also encountered the problem and figured out how to use it with scrollEnabled if anyone's interested.

The way it works in the code is that the ScrollView has 5 elements pre-rendered, from [month-2, ..., month+2]. So you have to call this.scrollToItem(2) for it to scroll to index 2, the current month.
When the Calendar mounts, it tries to scroll in componentDidMount(), however you cannot scroll in componentDidMount as at this point some animations will still be run (see here).
So the solution is to call this.scrollToItem(VIEW_INDEX) after running the animations.
TL;DR
Change the line in Calendar.js

componentDidMount() {
      this.scrollToItem(VIEW_INDEX)
}

to

import {...,
  InteractionManager
} from 'react-native';
componentDidMount() {
     InteractionManager.runAfterInteractions(() => {
      this.scrollToItem(VIEW_INDEX)
    })
}

I might create a pull request later.

Contributor

MrToph commented Oct 6, 2016

I also encountered the problem and figured out how to use it with scrollEnabled if anyone's interested.

The way it works in the code is that the ScrollView has 5 elements pre-rendered, from [month-2, ..., month+2]. So you have to call this.scrollToItem(2) for it to scroll to index 2, the current month.
When the Calendar mounts, it tries to scroll in componentDidMount(), however you cannot scroll in componentDidMount as at this point some animations will still be run (see here).
So the solution is to call this.scrollToItem(VIEW_INDEX) after running the animations.
TL;DR
Change the line in Calendar.js

componentDidMount() {
      this.scrollToItem(VIEW_INDEX)
}

to

import {...,
  InteractionManager
} from 'react-native';
componentDidMount() {
     InteractionManager.runAfterInteractions(() => {
      this.scrollToItem(VIEW_INDEX)
    })
}

I might create a pull request later.

@nicotroia

This comment has been minimized.

Show comment
Hide comment
@nicotroia

nicotroia Jul 31, 2017

I had a similar issue where the Calendar would not render when scrollEnabled was set to false.

The View container that wraps the calendar days needs to have a style change in order to work.

{this.props.scrollEnabled ? (
  <ScrollView
    ...
  >
    {calendarDates.map((date) => this.renderCalendarView(this.props.calendarFormat, moment(date), eventDatesMap))}
  </ScrollView>
 ) : (
  <View style={{flex: 1}} ref={calendar => this._calendar = calendar}>
    {calendarDates.map((date) => this.renderCalendarView(this.props.calendarFormat, moment(date), eventDatesMap))}
  </View>
)}

I added the style={{flex: 1}} to the container (when there is no ScrollView) and it fixed my problem. Hopefully this will help someone else

I had a similar issue where the Calendar would not render when scrollEnabled was set to false.

The View container that wraps the calendar days needs to have a style change in order to work.

{this.props.scrollEnabled ? (
  <ScrollView
    ...
  >
    {calendarDates.map((date) => this.renderCalendarView(this.props.calendarFormat, moment(date), eventDatesMap))}
  </ScrollView>
 ) : (
  <View style={{flex: 1}} ref={calendar => this._calendar = calendar}>
    {calendarDates.map((date) => this.renderCalendarView(this.props.calendarFormat, moment(date), eventDatesMap))}
  </View>
)}

I added the style={{flex: 1}} to the container (when there is no ScrollView) and it fixed my problem. Hopefully this will help someone else

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment