├── .gitignore
├── README.md
├── index.html
├── package.json
├── source
├── app.js
└── gcal.js
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React tutorial
2 |
3 | Get acquainted with React, webpack, and AJAX by setting up a simple event calendar.
4 |
5 | To read the tutorial, [click here](https://blog.daftcode.pl/react-calendar-with-google-calendar-as-cms-tutorial-5f5d81e425a9)
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Calendar
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-gcal-tut",
3 | "version": "1.0.0",
4 | "description": "React tutorial",
5 | "author": "Adam Borowski",
6 | "license": "ISC",
7 | "babel": {
8 | "presets": [
9 | "react",
10 | "es2015"
11 | ]
12 | },
13 | "devDependencies": {
14 | "babel-core": "^6.21.0",
15 | "babel-loader": "^6.2.10",
16 | "babel-preset-es2015": "^6.18.0",
17 | "babel-preset-react": "^6.16.0",
18 | "css-loader": "^0.26.1",
19 | "moment": "^2.17.1",
20 | "react": "^15.4.1",
21 | "react-big-calendar": "^0.11.1",
22 | "react-dom": "^15.4.1",
23 | "style-loader": "^0.13.1",
24 | "superagent": "^3.3.1",
25 | "webpack": "^1.14.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/source/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import moment from 'moment'
4 |
5 | import BigCalendar from 'react-big-calendar'
6 | // a localizer for BigCalendar
7 | BigCalendar.momentLocalizer(moment)
8 |
9 | import { getEvents } from './gcal'
10 |
11 | // this weird syntax is just a shorthand way of specifying loaders
12 | require('style!css!react-big-calendar/lib/css/react-big-calendar.css')
13 |
14 | class App extends React.Component {
15 | constructor () {
16 | super()
17 | this.state = {
18 | events: []
19 | }
20 | }
21 | componentDidMount () {
22 | getEvents((events) => {
23 | this.setState({events})
24 | })
25 | }
26 | render () {
27 | return (
28 | // React Components in JSX look like HTML tags
29 |
33 | )
34 | }
35 | }
36 |
37 | render(, document.getElementById('root'))
38 |
--------------------------------------------------------------------------------
/source/gcal.js:
--------------------------------------------------------------------------------
1 | import request from 'superagent'
2 |
3 | const CALENDAR_ID = 'tb8ckdrm61bdsj6jfm7khob4u5@group.calendar.google.com'
4 | const API_KEY = 'AIzaSyAOuDzSlG24RPBn3OKVAyjW3OK_EJhCUbp'
5 | let url = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}`
6 |
7 | export function getEvents (callback) {
8 | request
9 | .get(url)
10 | .end((err, resp) => {
11 | if (!err) {
12 | const events = []
13 | JSON.parse(resp.text).items.map((event) => {
14 | events.push({
15 | start: event.start.date || event.start.dateTime,
16 | end: event.end.date || event.end.dateTime,
17 | title: event.summary,
18 | })
19 | })
20 | callback(events)
21 | }
22 | })
23 | }
24 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | entry: './source/app.js',
3 | output: {
4 | filename: './dist/bundle.js'
5 | },
6 | module: {
7 | loaders: [
8 | {
9 | test: /\.js$/,
10 | loader: 'babel-loader',
11 | query: {
12 | presets: ['es2015']
13 | }
14 | }
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------