I chose a date next week, when reder () doesn't show the next week only the current week.

[NothingSerious]

I want to use the updateWeekView () but this method is undefined.How do I fix it

[peacechen]

27 may be helpful

[peacechen]

@NothingSerious Did you pass a reference prop to the CalendarStrip component? Post your code to help us diagnose your issue.

[NothingSerious]

       <CalendarStrip
            ref='CalendarStrip'
            calendarAnimation={{ type: 'parallel', duration: 30 }}
            daySelectionAnimation={{ type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: commonStyles.primaryColor.color }}
            style={{ height: 70, paddingHorizontal: 4, paddingVertical: 8, backgroundColor: 'white' }}
            calendarHeaderStyle={{ color: 'white' }}
            calendarColor={'#7743CE'}
            dateNumberStyle={{ color: '#505050' }}
            dateNameStyle={{ color: '#797979' }}
            highlightDateNumberStyle={{ color: commonStyles.primaryColor.color }}
            highlightDateNameStyle={{ color: commonStyles.primaryColor.color }}
            disabledDateNameStyle={{ color: 'grey' }}
            disabledDateNumberStyle={{ color: 'grey' }}
            datesWhitelist={datesWhitelist}
            datesBlacklist={datesBlacklist}
            selectedDate={this.state.selectDateString}
            startingdate={this.state.selectDateString}
            leftSelector={<Icon size={15} color='#B4B4B4' name='arrow-left' type='simple-line-icon' />}
            rightSelector={<Icon size={15} color='#B4B4B4' name='arrow-right' type='simple-line-icon' />}
            locale={locale}
            onDateSelected={date => this.onDayPress(date.format('YYYY-MM-DD'))}
            showMonth={false}
            useIsoWeekday={false}
          />

Below is the method that is called after the date of selection.

async onDayPress (dateString) { this.setState({ selectDate: dateString, selectDateString: dateString, calendarStripVisible: true, calendarVisible: false, scheduleLoading: true }) let { client, departmentId, queryDoctorsByDate, selectDoctor, querySchedules } = this.props await queryDoctorsByDate(client, { departmentId: departmentId, date: dateString }) await this.isExistDepartment(this.props.searchDoctorsByDate, departmentId) if (!isEmptyObject(this.state.selectDoctors)) { selectDoctor({ doctorId: this.state.selectDoctors[0].id }) await querySchedules(client, { departmentId, doctorId: this.state.selectDoctors[0].id, beginDate: dateString, endDate: dateString }) } this.setState({ scheduleLoading: false }) }

In this method, just call this.setstate (), the CalendarStrip work well. But if you request network data and update redux, the CalendarStrip will not show the week of the selection date.

[peacechen]

Couple of observations: onDayPress returns a Promise. The code inside it is in a different context than the caller's. You should bind onDayPress to your component's root context.

You set selectDate state to a formatted string instead of keeping the original Moment object. It's usually better to retain the original Moment object, and only format it to a string when you need to display it (or if another function can only handle a string). selectDateString is redundant as well. Pass selectDate to CalendarStrip's selectedDate and startingDate props (you have a typo as startingdate), preferably as the original Moment object as stated above.

None of these are CalendarStrip bugs. I recommend you review your code and brush up on ES6 Promises which will help you better debug.

[NothingSerious]

Thank you very much. My problem is solved, my code is fine. I have read The CalendarStrip source code, I annotated this method, and The CalendarStrip also works well.

[peacechen]

If you found a bug, please create a PR. Or you can post the code snippet here and I'll make the edit.

Looking at componentWillReceiveProps, it looks like using Moment to compare datetimes may be better.

[vishalchakbesh1]

I am also having the same issue how you were able to fix it can you please share some details. I am on v1.3.1 I've also tried this method

this.refs.calendar.updateWeekView(selectedDate,range.start) but it always throws an undefined function error.

Though one thing I've noticed is that week change issue occurs only when the datesWhitelist is set in the props once you comment this the code seems to work fine.

Please suggest some solution.

[peacechen]

The datesWhiteList prop should not cause the updateWeekView method to be undefined. Please post your code and more details. Most likely your callback context is different than your component's context.

[EgorZotov]

Hi! I got the same propblem too. The source of the problem is updating weekData only if selectedDate changed in componentDidUpdate. This is quick fix.

151

[peacechen]

The updateWeekView method has been restored in 2.0.0.

[Pirsanth]

I still get the problem that updateWeekView is undefined (not a function)

[peacechen]

Which version of RNCS do you have installed in your project? The function is in the root class: https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarStrip.js#L268