Question

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

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

Answer 1

您可以使用软件包react-big-calendar并从Google Calendar API获取事件。它与我合作，并且我正在使用create-react-app。查看步骤：

安装这些软件包：npm i react-big-calendar moment superagent style-loader css-loader
Check that you have your Google Calendar public
Get your Calendar ID
将此文件（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。

来源：

集成Google Calendar API以响应钩子

1 个答案: