How to populate React Big Calendar with data from API

The popular create-react-app tool is always a time-saver:

Now let’s install a few more libraries with the below command

We installed the axios library to help with fetching data while the moment library will help us to format the JSOn results retrieved from the database for display in our calendar.

Now edit your src/App.js file to the following in order to display a calendar:

Now run npm start in order to view your calendar!

Head back to your src/App.js file and update the componentDidMount() function to the following:

Now you can view the event(s) stored in the database within the console

Let’s first store the events retrieved within a state variable by modifying the constructor() and componentDidMount() functions as follows:

You might notice that we used the moment library to format the JSON response for display in react-big-calendar. This is not absolutely necessary once you have formatted your API to provide timestamps in the required format.

Now we only need to update our render() function so that it uses the state variables. This can be done by changing:

to

With this change, the calendar’s event source is connected to the state which will be updated in the componentDidMount() function when the HTTP fetch completes successfully.

Related posts:

When Google Analytics stops working, it’s an all hands on deck effort to figure out what happened. Are calls being made on the page? Is the metadata correct? Are the right events firing? At VICE we…

The following report was written by Nur Arshad (Final year MSc Biomedical Sciences) & Sina Purabbas (Final year BSc Psychology). I am a Student Project Partner of the Faculty Student Project…

As the world adopts a new way of working, Manufacturing Global examines four ways to increase agility in manufacturing People need information and they need it now. This could be about health and…