refresh current props

[CorentinHeroux]

I need to change the current year for the calendar display. I make this possible with a button that updates the value of "current". The calendar doesn't update, but "current" does. How can I do this?

Here's my example that doesn't work :

const SimpleCalendar = () => {
    const [current, setCurrent] = useState('2020-01-01');

    return (
        <>
            <Calendar current={current} />
            <TouchableOpacity onPress={() => setCurrent('2021-01-01')}>
                <Text>2021</Text>
            </TouchableOpacity>
        </>
    );
};

"react": "16.11.0", "react-native": "^0.62.2", "react-native-calendars": "^1.403.0",

[badwolf1686]

@CorentinHeroux

I'm implementing a "Today" button and the same problem happened to me. And with React Native Debugger, I found that in Calendar its props.current changes accordingly (that's current) but state.currentDate does not. I think that's why there is no re-rendering of the month.

I found this issue #764 can be a solution with ref and Calendar.addMonth().

With my modification, it becomes

function todayBtnOnPress() {
    var today = new Date();
    var selectedDate = new Date(currentDate);
    var diff = - (selectedDate.getMonth() - today.getMonth()) - (selectedDate.getFullYear() - today.getFullYear()) * 12
    this.calendar.addMonth(diff);

    // need to keep track of current date when swipe/date or month changes
    // for month difference calculation and therefore jump/refresh
    setCurrentDate(formatDate(today));
};

function onDayPress(date) {
    // need to keep track of current date when swipe/date or month changes
    // for month difference calculation and therefore jump/refresh
    setCurrentDate(date.dateString);
};

function onMonthChange(date) {
    // need to keep track of current date when swipe/date or month changes
    // for month difference calculation and therefore jump/refresh
    setCurrentDate(date.dateString);
};

<Button
    title='Today'
    onPress={() => todayBtnOnPress()}
/>

const [currentDate, setCurrentDate] = useState(formatDate(new Date()));

<Calendar
    horizontal={true}
    pagingEnabled={true}
    enableSwipeMonths={true}
    // current={currentDate}
    ref={ref => this.calendar=ref}
    onDayPress={onDayPress}
    onMonthChange={onMonthChange}
/>

[kelokchan]

Try passing key={current} to your Calendar. It works for me

[Yandamuri]

@kelokchan May I know what is current in key={current}?

[kelokchan]

@kelokchan May I know what is current in key={current}?

Should be the same as the current prop you pass into the Calendar, which is the currently selected date.

[adrianslr]

@kelokchan May I know what is current in key={current}?

Should be the same as the current prop you pass into the Calendar, which is the currently selected date.

you saved me hours dude!

[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.

[mickeylam]

Try passing key={current} to your Calendar. It works for me

It works too, but May I ask why is it happen ?

[sanyamk30]

Try passing key={current} to your Calendar. It works for me

Thanks man!

[abury]

Try passing key={current} to your Calendar. It works for me

Glad this is working for some, but definitely not working for me. Given that current needs to be a Date type and key is a string, I'm not sure how this is supposed to work.

The type docs also say that we shouldn't need to use this. We shouldn't need to utilize an internal attribute for something as basic as programmatically selecting the selected date in a calendar. Might be worth discussing how we can get a proper fix this?

[mickeylam]

Try passing key={current} to your Calendar. It works for me

Glad this is working for some, but definitely not working for me. Given that current needs to be a Date type and key is a string, I'm not sure how this is supposed to work.

The type docs also say that we shouldn't need to use this. We shouldn't need to utilize an internal attribute for something as basic as programmatically selecting the selected date in a calendar. Might be worth discussing how we can get a proper fix this?

Hi, you can use string type for the current , e.g {'2021-09-06'}, you can try

[abury]

Thanks for the reply @mickeylam, but no that doesn't work.

[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.

[glushkina1]

I've tried that key prop, it doesn't work Does anyone know how to jump to a selected month?

[shayella]

@kelokchan Thanks a lot dude. This small hack served my time. I appreciate :)

[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.

[logicman]

Awesome! This key={} works :)

[aymericdelaforcade]

For me passing key={new Date()} works !