React JS Example- Google Calendar Chart Tutorial

Hi friends! In this tutorial, we will learn how to create a Calendar Chart In a React JS App. To embed the calendar graph in React, we will use the Google react chart js package. This guide will help us in showing the data or information month-wise in a horizontal calendar chart.

Some of us may know already that a calendar chart displays the activity throughout an extended period, such as months or years. Ideally, it is best used to illustrate how any quantity differs depending on the day of the week or how it trends over time.

How To create React Js Google Calendar Chart Component

See the below steps for implementing the above-mentioned:

  1.  Create  a New React App
  2. Add bootstrap Library
  3. Install google Charts Package
  4. Build Google Calendar Chart
  5. Update App Js File
  6. Start the React App

Step 1- Create A New React App

For the implementation of Calendar Charts, the first step is to download the new react app with a simple command. See below:

npx create-react-app react-blog

Further, we get inside the project directory:

cd react-blog

 

Step 2- Add The Bootstrap Library

The next step is to install the Bootstrap library which is used for building eloquent UI components:

npm install bootstrap

We will now configure the Bootstrap in the react app. For this, open and add the plugin path in App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

 

Step 3- Install The Google Charts Package

So, here, in this step, we have to install the Google charts js package. Then head over to the command prompt and install the package using the given command:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Build Google Calendar Chart

We will need a separate component to make the calendar chart for which we need to create components/directory. Now create the GoogleChart.js file within the folder and after is needed to insert the below code inside the file:

import React, { Component } from "react";
import Chart from "react-google-charts";

const data = [
  [{ type: 'date', id: 'Date' }, { type: 'number', id: 'Won/Loss' }],
  [new Date(2012, 3, 13), 37032],
  [new Date(2012, 3, 14), 38024],
  [new Date(2012, 3, 15), 38024],
  [new Date(2012, 3, 16), 38108],
  [new Date(2012, 3, 17), 38229],
  [new Date(2013, 1, 4), 38177],
  [new Date(2013, 1, 5), 38705],
  [new Date(2013, 1, 12), 38210],
  [new Date(2013, 1, 13), 38029],
  [new Date(2013, 1, 19), 38823],
  [new Date(2013, 1, 23), 38345],
  [new Date(2013, 1, 24), 38436],
  [new Date(2013, 2, 10), 38447],
];

class GoogleChart extends Component {
  
  constructor(props) {
    super(props)
  }

  render() {
      return (
          <div className="container mt-5">
              <h2>React Js Calendar Chart Example</h2>

              <Chart
                  width={1000}
                  height={400}
                  chartType="Calendar"
                  loader={<div>Loading Chart</div>}
                  data={data}
                  options={{
                    title: 'Red Sox Attendance',
                  }}
                  rootProps={{ 'data-testid': '1' }}                
              />            
          </div>                  
      )
  }
}

export default GoogleChart;

 

Step 5- Update the App Js File

So, in this simple step, e will have to register the component into the App.js file. It is the root component of the React app and it manages the hierarchy in React for every view and component:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleChart';


function App() { 
  return (
    <div className="App">
      <GoogleChart />
    </div>
  );
}

export default App;

 

Step 6- Start The React App

So, you see, the chart component has been developed. Now, we will just start the React app using the given code:

npm start

 

Summary

Finally, we reach here at the end of this simple but important tutorial. Hope you have easily learned how to create a React js Calendar Chart Component using a third-party plugin.

We have also seen how to install, set up, and use the Google Charts package in the React app.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *