How to send the date state of calendar to another calendar with Reactjs?

Question

I have two calendars, such as the Agenda, have an icon calendar button, when I click on it, it will be redirected to another calendar (Planning), these calendars are developed with react-big-calendar, I want when I navigate for example on the week of juin 17 - 23 of Agenda and I click on the icon calendar, it will be redirected to juin 17 - 23 of the Planning.

My code is : https://codesandbox.io/s/m7k904y3o8

I try to send the date with getWeek(), but it doesn't work.

How can I fix it ?

Answer 1

You can add additional data to this.props.history.push which will then be available in the location prop on your Planning component. For example if you want to view the Week of the 20th December 1995:

// Agenda.js: Routing to "/planning"

this.props.history.push("/planning", { date: new Date(1994, 11, 19, 0, 0)})

// Planning.js

constructor(props) {
    super(props); //Important

    this.state({
        /* ... */
        dateWeek: this.props.location.state && this.props.location.state.date
    });
}

// Following is a fix or else you would not get next/previous week.

getThisWeek = (dateWeek) => {
    this.setState({ dateWeek });
}

---

Two other solutions I would recommend are URL parameters and Query parameters.