Changing month, changes the selected date

[HrideyReact]

I am using markedDates prop to mark selected date, but when i change month, it selects 1st of the month by default i think, I dont get what the issue is. Can anyone help me ?

[AmaanSayyed]

It could be due to setting the selected date in onMonthChange, which defaults to the 1st.. Share your code if possible .And if its expandable calendar i think it has that behaviour

[HrideyReact]

Yea @AmaanSayyed , I tried doing that as well, it still gives the error, Cant share the whole codebase it's huge, here are some of the part, I think should be enough,

package.json "react-native-calendars": "1.1307.0" "react-native": "0.79.2",

const [selectedDate, setSelectedDate] = useState('');
  const [currentDate, setCurrentDate] = useState(new Date());
  const formattedCurrentDate = useMemo(
    () => currentDate.toISOString().split('T')[0],
    [currentDate],
  );
  const [markedDates, setmarkedDates] = useState({});

  // Memoize merged dates to prevent unnecessary recalculations
  const mergedMarkedDates = useMemo(() => {
    return {
      ...markedDates,
      [formattedCurrentDate]: {
        ...(markedDates[formattedCurrentDate] || {}),
        selected: true,
        selectedColor:
          formattedCurrentDate && !selectedDate
            ? '#F5B42A'
            : formattedCurrentDate !== selectedDate
            ? '#D3D3D3'
            : '#F5B42A',
      },
      [selectedDate]: {
        ...(markedDates[selectedDate] || {}),
        selected: true,
        selectedColor: '#F5B42A',
        style: {
          // Add shadow styles
          shadowColor: '#000',
          shadowOffset: {width: 0, height: 2},
          shadowOpacity: 0.25,
          shadowRadius: 3.84,
          elevation: 5, // for Android
        },
      },
    };
  }, [markedDates, formattedCurrentDate, selectedDate]); 

const handleMonthChange = useCallback(
    onMonthChange => {
      console.log('onMonthChange', onMonthChange);
      if (selectedDate !== '') {
        const dateOnScroll = new Date(onMonthChange.dateString).getMonth();
        const checkFromSelectdate = new Date(selectedDate).getMonth();

        if (checkFromSelectdate === dateOnScroll) {
          setDataOfList([]);
          dispatch(fetchSupplement(selectedDate));
        } else {
          // setSelectedDate(moment().format('YYYY-MM-DD'));
          setmarkedDates(fetchHomeData?.calenderobject || {});
          setDataOfList([]);
          dispatch(fetchSupplement(onMonthChange.dateString));
        }
      } else {
        // setSelectedDate(onMonthChange.dateString);
        setDataOfList([]);
        dispatch(fetchSupplement(onMonthChange.dateString));
      }
    },
    [selectedDate, dispatch],
  );

  <CalendarProvider date={currentDate}>
          <ExpandableCalendar
            current={selectedDate || currentDate}
            selected={selectedDate}
            onDayPress={handleDayPress}
            onMonthChange={handleMonthChange}
            renderArrow={renderArrow}
            onCalendarToggled={setCalendarOpen}
            pastScrollRange={5}
            futureScrollRange={5}
            style={{
              elevation: 0,
              shadowOpacity: 0,
            }}
            monthFormat={'MMMM yyyy'}
            hideArrows={false}
            hideExtraDays={true}
            theme={{
              dayTextColor: '#929DAC',
              textDisabledColor: '#929DAC',
              dotColor: '#00adf5',
              textMonthFontWeight: 'bold',
              textDayHeaderFontWeight: 'bold',
              // selectedDayBackgroundColor: '#00000000',
              // selectedDayTextColor: '#A2ACB8',
            }}
            headerStyle={styles.header} // for horizontal only
            markedDates={mergedMarkedDates}
            showOverflowDate={false}
            scrollEnabled={true}
            closeOnDayPress={false}
          />
        </CalendarProvider>