How to populate React Big Calendar with data from API

Note: Updated to react-big-calendar v0.22.1

I was recently asked by a friend to help him with a simple react application that fetched events from a remote SQL database and displayed them in a calendar. I’ll be using the react-big-calendar library for this tutorial. You can find the source code on Github and an online demo here

Scaffold app with create-react-app

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

npm i -g create-react-app 
create-react-app {project-name}
cd {project-name}

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

npm i react-big-calendar
npm i moment
npm i axios

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.

Displaying the calendar

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

import React from "react";
import { render } from "react-dom";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";
moment.locale("en-GB");
const localizer = momentLocalizer(moment);
const myEventsList = {} //empty object for now
class App extends Component{
  constructor(){
   //We will populate this function later
  }
  componentDidMount(){
   //We will populate this function later
  }
  render(){
    return(
      <Calendar
        localizer={localizer}
        events={myEventsList}
        startAccessor="start"
        endAccessor="end"
      />
    )
  }
}

Now run npm start in order to view your calendar!

Setting up the server

Now that we’re sure that our calendar library works, we’ll setup a REST API using Express server and Node-MySQL. This server and its code will be run independently from the web application so to maintain separate of concerns, you can place the code within a server folder in the root of the project. I created a MySQL database named ‘calendar_test’ and added events to a table named ‘events’. I used WampServer however you are free to use any MySQL client that you prefer.

Essentially, the REST API provides the events in a JSON format in response to a HTTP GET request at /events listening on port 3001 . You can test that your API is working correctly by entering the URL within your browser: http://localhost:3001/events or you can use tools like Postman

You can find a gist for the code and SQL here or reference the full implementation in the Github repo here

Retrieving events from API

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

componentDidMount() {
  let self = this
  axios.get('http://localhost:3001/events')
      .then(function (response) {
        console.log(response.data);
        let appointments = response.data;
        
        for (let i = 0; i < appointments.length; i++) {
          console.log(appointments[i])
        }    
  
      })
      .catch(function (error) {
        console.log(error);
      });
  }

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

Displaying events in calendar

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

constructor(props) {
    super(props)
    this.state = {
      cal_events: [],
    }
}
componentDidMount() {
  axios.get('http://localhost:3001/events')
      .then(response => {
        
        let appointments = response.data;
        
        for (let i = 0; i < appointments.length; i++) {
          appointments[i].start =    moment.utc(appointments[i].start).toDate();
          appointments[i].end = moment.utc(appointments[i].end).toDate();
          
        }
        self.setState({
          cal_events:appointments
        })
  
      })
      .catch(function (error) {
        console.log(error);
      });
  }

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:

const cal_events = {}

to

const {cal_events} = this.state

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.

Give it a try and let me know if you face any issues! Feel free to grab the source code to use however you wish.