React Calendar with Google Calendar as CMS — tutorial

Published in

Daftcode Blog

7 min readJan 11, 2017

Let’s say you need an events calendar on a simple static website. Building a CMS just for a calendar can be an overkill in such a situation. On the other hand, embedding a calendar from an external service does not give you much control over it look and functions. So why not just use a Google calendar as a CMS?

In this tutorial you’ll learn how to:

set up a React project with webpack
create a React component
fetch events from a Google Calendar using AJAX

This tutorial was prepared for beginners — React is great for that, as it has a gentle learning curve while providing super-powers. Some JavaScript knowledge and familiarity with the command line is welcome, but not necessary.

You can see the finished project on GitHub.

Step 1: The set-up

This is actually gonna be a big step, but this is how it works in front-end development. Code needs to work in multiple environments and travel fast — so it has to be translated and minified.

All we do here is creating a build process that will transform modern, readable code into a bundle, that is lightweight and understandable for not-so-modern browsers.

Translating the JavaScript

React is written in JavaScript, which is understood by all modern browsers, but we’re going to use it’s newest version, called ES6 — which is not. This cutting edge ES6 needs to be translated to boring old JS. Also, we’re gonna use JSX syntax, which needs to be translated as well. Our translator here is gonna be Babel.

To use Babel, and create a small, minified JavaScript file (so it travels fast through the Internets), a module-bundler called webpack will be used. A module bundler, as the name suggests, takes multiple files, and bundles them into one elegant package to distribute over the web. Webpack can do all sorts of things in the process, and one of them is translating old JS to new JS.

In order to use the aforementioned tools, the node.js environment with node package manager (npm) is needed. You can download node on nodejs.org. A project using npm packages should have a package.json file, which lists all dependencies and provides some additional information about the project. Let’s create one by running (in a new folder):

$ npm init

Now that you have a fresh package.json, download all modules that will be needed (if you run into permissions problems, check out this article):

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom webpack
$ npm install -g webpack

We’re adding webpack also as a global (-g option) module, so it can be used directly from the command line (that’s just for simplicity, normally you’d use npm scripts for build commands).

Now with all these downloaded, there are just two more things we need to get things started. First one is configuration for Babel. Just add the following key to package.json (remember about the comma, if it’s not the last key):

"babel" : { "presets": ["react", "es2015"] }

The second thing is configuration file for webpack, called webpack.config.js:

All it says is:

Hey webpack: get the file source/app.js, resolve all of it’s dependencies (that is if this file wants to include any other ones), and spit out dist/bundle.js. Oh, and if you see any file with .js extension — translate it with Babel. Thanks.

All right, so let’s try it out — create a source/app.js file, it can look like that:

const who = 'World'
console.log(`Hello ${who}`)

And then run:

$ webpack

Hopefully you can see a new file — dist/bundle.js! The ‘const’ and the thing with $ sign (called string interpolation) are just the new ES6 features. Take a peek at the bundle.js file — it has some additional code added by webpack but you should see these lines somewhere:

var who = 'World';
console.log('Hello ' + who);

As you probably guessed, it’s the old JavaScript. You can run webpack with ‘-p’ option to minify the code — then the translated fragment will look something like that:

var r="World";console.log("Hello "+r)}

Nice, this succinct piece of code can be run on all modern browsers and will get to them fast — thanks to minification.

What about HTML?

Yep, it’s still needed, but just as a vessel for the JavaScript. Create a index.html file at the root of your project:

The quickest way to see the results is to run:

$ npm install -g http-server && http-server

And then visit localhost:8080, fire up the JavaScript console in the dev tools, and there it is — your “Hello World”.

Step 2. A React Component

A React component is the basic building block of a React app. There are a couple of ways to create a React component, but most common is instantiating React.Component class:

Which says:

First, I need React itself, and React-DOM (which lets React interact with HTML).
Then here is App, which is just like a React.Component (a blueprint for a component), but additionally: it’s state consists of a string “React” and it renders a div element with a string “Hello ” plus a string from the state.
Finally, please render this component inside of element with id “root”.

(you can read a more comprehensive version of the above here)

In case you were wondering, the HTML-like syntax in the render() method is called JSX. Because with React, you can forget about the traditional HTML+CSS+JS structure of a website and, as we’ll see, write almost everything in JavaScript.

So, let’s add this “root” element, just below the opening “body” tag in index.html file:

<div id="root"></div>

And run webpack, this time with a ‘watch’ flag so it will conveniently recompile whenever the app.js file is saved:

$ webpack --watch

And there you have it — a React component rendered on a website.

Step 3: A React calendar

Building a calendar component from scratch is out of the scope of this tutorial, so we’re gonna use react-big-calendar. First, let’s add it to the list of the dependencies, along with moment.js library, which will handle date localization. We also add two loaders, which are what enables webpack to handle whatever is not plain JS (when translating JS with Babel, we’ve already used a loader!). In this case, it’s CSS — we’re gonna add CSS from JS, which is a nice webpack feature:

$ npm install --save-dev react-big-calendar moment style-loader css-loader

Then change your app.js to this:

And there it is, a calendar.

Step 4: The Google calendar

We’re gonna need two pieces of information — a calendar ID, and an API key.

To get the first one, go to calendar.google.com and create a new calendar, with the “Make this calendar public” option checked. Then in the calendar settings you can find the Calendar ID. While you’re at it, create some events so the calendar has something to display.

An API key is what identifies you as the one making the requests to the Google services. Getting the API key is a bit more tricky than getting the Calendar ID, but it has been nicely described here.

Step 5. Fetching Events with AJAX

AJAX stands for Asynchronous JavaScript and XML, but all that matters here is that it allows getting data from a server without the need to refresh the page.

A basic AJAX function is easy to write, but for simplicity we’re gonna use superagent, a handy module for making web requests.

$ npm install --save-dev superagent

For the event-fetching logic, we’re gonna write a custom module. A module is just a file that can be — just like modules installed with npm command — imported into another file. Create a gcal.js file in the source folder (just change the CALENDAR_ID and API_KEY):

What it says, from line 8 on, is:

Get data by that URL, and then — if there is no error — assume it’s formatted as JSON and parse it as such. Then iterate over the items array in this parsed data and create an events array, taking start, end, and title values from each item. Finally, invoke the callback function with the events array as argument.

(here is a more comprehensive description)

One last step — actually use the gcal module in app.js. Below is the final version of app.js file. All that changed is the initial state in constructor and a componentDidMount lifecycle method. The way it works is simple:

initialise events object in the component’s state as an empty array
as soon as the component mounts, fetch events from the google calendar and change the events object in the state to the fetched events array