javascript - 将谷歌日历 API 集成到 React hooks

Question

我的问题是如何使用react进行集成？ 日历需要创建新约会、管理或编辑约会， 分享并邀请新预订？

我已经尝试通过获取获取谷歌API， 并安装软件包但没有任何效果。

Answer 1

您可以使用 react-big-calendar 包来实现这一点，并从 Google Calendar API 获取事件。它对我有用，我正在使用create-react-app。查看步骤:

1. 安装这些软件包: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. 将此文件 (fetch.js) 添加到您的 src 文件中(小心替换代码中的变量)

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);
    }
  });
}

最后，在您的 App.js 中，输入以下代码:

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>
    );
  }
}

虽然我没有在代码中添加交互，但是你可以have a closer look at this page to know more .

来源:

• React Calendar with Google Calendar as CMS — tutorial
• Big Calendar