CODEWITHSUNDEEP
javascriptpython-3.xreactjs
Antuan Frayman
Antuan Frayman

Reputation: 21

integrating google calendar API to react hooks

my question is how to integrate using react? the calendar needs to create new appointments, manage or edit appointments, sharing and inviting new bookings?

I have already tried getting a google api by fetching, and installing packages but nothing is working.

Upvotes: 2

Views: 3284

Answers (1)

jorusTyron
jorusTyron

Reputation: 31

You can do that using the package react-big-calendar and fetch events from Google Calendar API. It worked with me and I am using create-react-app. Check out the steps:

  1. Install theses packages: npm i react-big-calendar moment superagent style-loader css-loader
  2. Check that you have your Google Calendar public
  3. Get your Calendar ID
  4. Add this file (fetch.js) to your src file (carefully replacing the variable in the code)
import request from "superagent";
import { Config } from "../../components/Config/Config";

let GOOGLE_CALENDAR_URL = `https://www.googleapis.com/calendar/v3/calendars/${<YOUR_CALENDAR_ID>}/events?key=${<YOUR_API_KEY>}`;

    export function getEvents(callback) {
  request.get(GOOGLE_CALENDAR_URL).end((err, resp) => {
    if (!err) {
      const events = [];
      JSON.parse(resp.text).items.map(event => {
        return events.push({
          start: new Date(event.start.dateTime.toString()),
          end: new Date(event.end.dateTime.toString()),
          title: event.summary
        });
      });
      callback(events);
    }
  });
}
  1. Finally, in your App.js, put this code:
import React, { Component } from "react";
import BigCalendar from "react-big-calendar";
import moment from "moment";
import { getEvents } from "./fetch";

import "react-big-calendar/lib/css/react-big-calendar.css";
import "./App.css";

const localizer = BigCalendar.momentLocalizer(moment); // or globalizeLocalizer

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      events: []
    };
  }

  componentDidMount() {
    getEvents(events => {
      this.setState({ events });
    });
  }

  render() {
    return (
      <div>
        <BigCalendar
          localizer={localizer}
          events={this.state.events}
          startAccessor="start"
          endAccessor="end"
          defaultView="week"
          culture="fr"
        />
      </div>
    );
  }
}

Although I haven't added the interactions in the code, but you can have a closer look at this page to know more.

Sources:

Upvotes: 3

Related Questions