React

React Js Google Calendar Chart Tutorial Example

In this tutorial, you will learn how to create a calendar chart in React js application. To embed the calendar graph in react, we will use the Google react chart js package. This tutorial will help you show the data or information month-wise in a horizontal calendar chart.

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

  • Step 1: Create React App
  • Step 2: Add Bootstrap Library
  • Step 3: Install Google Charts Package
  • Step 4: Build Google Calendar Chart
  • Step 5: Update App Js File
  • Step 6: Start React App

Create React App

For agile integration, you need to have a basic react app. You can download it with a single command; make sure you have node and npm installed in your system.

npx create-react-app react-blog

Get inside the project folder.

cd react-blog

Add Bootstrap Library

You can use the Bootstrap framework for building eloquent UI components.

To install the package, type command and hit enter.

npm install bootstrap

Let us configure the Bootstrap in react app, 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;

Install Google Charts Package

In the next step, you will be installing the Google chart js package, head over to the command prompt, and use the given command to install the package.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Build Google Calendar Chart

We need a separate component to make the calendar chart, for that create components/ directory, and create the GoogleChart.js file within the folder and after that insert all the given 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;

Update App Js File

In the next step, we require 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;

Start React App

The chart component has been developed; now, start the react app through the given command and test the view on the browser.

npm start

Conclusion

In this eloquent tutorial, you have significantly learned how to create a React js calendar chart component using a third-party plugin.

We demonstrated how to install, set up, and use the Google charts package in react app, and we are pretty sure that you’ve liked the intuitive approach to reckon the React calendar graph topic.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

2 days ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

5 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

2 weeks ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago