React-big-calendar: External API to navigate to a specific date

[rmdort]

Hi, Is there an API to navigate to a specific date?

[jquense]

yup, the date prop

[rmdort]

But if i use the date prop, i cant use the toolbar navigation anymore.

[jquense]

sure you can, just pair it with the onNavigate prop.

those two props work like controlled inputs (value/onChange). anytime the calendar wants to set the date it will fire onNavigate, it's up to you if you want to then set that to date. if you only want to set the initial starting date you can use defaultDate.

[rmdort]

Dont think onNavigate solves this. My use-case is that i have a Mini Calendar on the sidebar and a Big calendar. When i select a date in the mini-calendar, the dates in the big calendar should change. But when i navigate using Prev/Next buttons in the mini calendar. the big calendar should not change.

I had to modified the source code to add a onSelectDate handler to solve this. Thanks for the feedback :)

[jquense]

that use case is exactly what date/onNavigate are for. in fact we do the same thing in our app using the little calendar from react-widgets

[hestacio]

Is there an example how to use onNavigate and date to manually jump to a date of calendar? trying to test it using a button onclick..but I can't figure it out :(

[wasabigeek]

If anyone still comes across this, hope to give some clarity to the other (correct) answers above.

To navigate to a specific day, you just need to set <BigCalendar date={this.state.yourDate} /> and change it however you want in your parent component.

If you do so, the built-in navigation (forward/backward) won't work as the default handleNavigate function won't change your state's date (this.state.yourDate in the above example). All you have to do is set the onNavigate prop to reflect the date change in your state, e.g.:

    ...
    handleNavigate(date, view, action) {
        this.setState({yourDate: moment(date).toDate();
        ...
    }
    ...
    render() {
        return <BigCalendar
            date={this.state.yourDate}
            onNavigate={this.handleNavigate}
        />
    }
    ...