scrollToOnSetSelectedDate do not Work

[root19942]

HI I have put a TouchableOpacity for turn back to current Date setSelectedDate work but the calendar do not scroll

please help me thank you

[peacechen]

setSelectedDate() by default does not move the calendar position. It only selects the date. If you're using scrollable, use the prop scrollToOnSetSelectedDate to also move the calendar to that date.

If you aren't using scrollable, you can use either the prop startingDate or the method updateWeekView().

In the future, please post a code snippet and a Snack that reproduces the issue.

[ram95krishh]

<CalendarStrip
    scrollToOnSetSelectedDate={true}
    scrollable={true}
    style={{ height: 100, paddingTop: 20, paddingBottom: 10 }}
    calendarHeaderStyle={styles.calenderHeaderStyle}
    dateNameStyle={styles.dateNameStyle}
    dateNumberStyle={styles.dateNumberStyle}
    leftSelector={[]}
    rightSelector={[]}
    selectedDate={this.state.selectedDate}
    onDateSelected={(date) => this.dateChange(date)}
    datesWhitelist={datesWhitelist}
    minDate={moment(new Date())}
    maxDate={moment(new Date()).add(2, "M")}
    highlightDateNameStyle={styles.selectedDatesStyle}
    highlightDateNumberStyle={styles.selectedDatesStyle}
/>

Having the same issue. Even with scrollToOnSetSelectedDate={true} date is not changing on scrolling. setSelectedDate() is one of the handlers available with the calendarStrip ref. But what gets called on scroll? Why does it not automatically change the date on scroll/swipe on the strip?

[peacechen]

scrollToOnSetSelectedDate affects the behavior of the internal method setSelectedDate(). Scrolling by the user isn't related to this. What date are you wanting to "automatically change the date on scroll/swipe" ?

I recommend that you browse the callback props listed in the documentation: https://github.com/BugiDev/react-native-calendar-strip#initial-data-and-ondateselected-handler

[ram95krishh]

Ok my bad. I was assuming the date would change as the user scrolls on the calendar strip. Like I swipe right to next week, and the first day of the next view gets set as selectedDate. Is there a way we can achieve that? Or even if it can switch to next day on each small swipe? Something like the gif below (it's a native implementation by the way, not React Native!)

[peacechen]

It is possible if you would like to submit a PR 😄 Please start a new thread, this one is veering off topic.

[mubashirjabbar]

I'm faceing the same issue,

<CalendarStrip
  scrollable
  selectedDate={this.state.dateMonth}
  setSelectedDate={this.state.dateMonth}
  scrollToOnSetSelectedDate={true}
  updateWeek={this.state.dateMonth}
  style={{height: hp(5.8), width: '100%'}}
  calendarColor={colors.BULE}
  iconLeft={null}
  iconRight={null}
  dateNumberStyle={{color: 'white'}}
  dateNameStyle={{
    color: 'white',
    fontSize: wp(3.8),
    fontWeight: '700',
  }}
  iconContainer={{flex: 0.01}}
  showMonth={false}
  highlightDateNameStyle={{
    fontSize: wp(3.2),
    backgroundColor: colors.WHITE,
    fontWeight: 'bold',
    color: colors.BLACK,
  }}
  highlightDateNumberStyle={{
    fontSize: wp(3.5),
    backgroundColor: colors.WHITE,

    fontWeight: 'bold',
    color: colors.BLACK,
  }}
  daySelectionAnimation={{
    type: 'background',
    highlightColor: colors.WHITE,
  }}
/>

[ImAbhishekTomar]

I am facing the same.

https://github.com/BugiDev/react-native-calendar-strip/issues/267

<CalendarStrip
          calendarAnimation={{type: 'parallel', duration: 15}}
          showMonth={false}
          scrollable={true}
          style={{height: 80}}
          calendarColor={'#fff'}
          dateNumberStyle={{color: 'rgba(0,0,0,0.8)'}}
          dateNameStyle={{color: 'rgba(0,0,0,0.5)'}}
          highlightDateContainerStyle={{
            backgroundColor: '#80c627',
            borderRadius: 4,
          }}
          selectedDate={SelectedDate}

          startingDate={moment().startOf('isoWeek')}
          leftSelector={[]}
          rightSelector={[]}
          onDateSelected={onDateSelected}
          scrollToOnSetSelectedDate={true}
        />

[peacechen]

I don't see a ref in the code snippets. Are you calling setSelectedDate() ?

[ImAbhishekTomar]

I don't see a ref in the code snippets. Are you calling setSelectedDate() ?

I am using selected date only... Here is the full details about my issue

https://github.com/BugiDev/react-native-calendar-strip/issues/267#issue-800852639

[duongnv129]

Hi @peacechen, I'm having an issue with scrolling. After updated SelectedDate by setSelectedDate the scroll didn't go to the selected date. The log has shown successfully updated the selected date.

[Sun Apr 11 2021 10:25:39.572]  LOG      Selected: Fri Apr 09 2021 12:25:37 GMT+0700
[Sun Apr 11 2021 10:25:54.595]  LOG      Selected: Wed Apr 14 2021 12:25:39 GMT+0700
[Sun Apr 11 2021 10:25:59.735]  LOG      Selected: Fri Apr 09 2021 10:25:59 GMT+0700

There is the code

const Calendar = () => {
  const minDate = moment().subtract(14, 'days');
  const maxDate = moment().add(14, 'days');
  const selectedDate = moment();
  const [dateSelected, setDateSelected] = useState(selectedDate);

  useEffect(() => {
    console.log(`Selected: ${dateSelected.toString()}`);
  }, [dateSelected]);

  return (
    <View>
      <ReactNativeCalendarStrip
        scrollable
        scrollerPaging
        numDaysInWeek={7}
        minDate={minDate}
        maxDate={maxDate}
        selectedDate={dateSelected}
        setSelectedDate={dateSelected}
        onDateSelected={setDateSelected}
        onWeekChanged={(start, end) =>
          console.log(`onWeekChanged: ${start.toString()} - ${end.toString()}`)
        }
        leftSelector={[]}
        rightSelector={[]}
        scrollToOnSetSelectedDate
      />
      <Button
        title={'update Date'}
        onPress={() => setDateSelected(moment().subtract(2, 'days'))}
      />
    </View>
  );
};

After updated SeletedDate

Do you have any ideas to fix this issue?

[peacechen]

@mubashirjabbar @duongnv129

Thanks for providing code snippets. First thing to note is that setSelectedDate is not a prop. It's an internal method that you can call via CalendarStrip's ref.

Regarding the selectedDate prop, I see a potential issue with prop updates when used with scrollable. I'll try to recreate and fix that.