matthewboman/react-google-calendar

A react-big-calendar implementation that pulls events from Google calendars

React Google Calendar

React Google Calendar is an implementation of react-big-calendar that pulls events from multiple Google calendars and reformats them for display. It also allows for many kinds of reoccuring events, such as daily, weekly, and monthly.

Demo && Docs

Getting Started

import Calendar from 'react_google_calendar'

const calendar_configuration = {
    api_key: YOUR_GOOGLE_API_KEY,
    calendars: [
      {
        name: 'demo', // whatever you want to name it
        url: '[email protected]' // your calendar URL
      }
    ],
    dailyRecurrence: 700,
    weeklyRecurrence: 500,
    monthlyRecurrence: 20
}

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

    render = () =>
      <div>
        <Calendar
          events={this.state.events}
          config={calendar_configuration} />
      </div>
}

Local Development

• clone the repository git clone https://github.com/crashspringfield/react-google-calendar.git
• config.js has a demo API for tests. Update config.js with your API key to access your calendar.
• Download dependencies: npm install
• Download peer dependencies: npm i array.prototype.flat moment@^2.22.2 react@^16.6.3 react-big-calendar@^0.20.2 react-dom@^16.6.3 webpack
• Development build with hot reloading: npm start
• Build for production: npm run build
• Run tests: npm test

Further setup

• Get a Google Calendar API key. Simple Calendar has good instructions for setting this up.
• Create calendars and make them public. Go to https://calendar.google.com/calendar to create a calendar and make it public. You'll need the Calendar ID in your Home component.

Contributing

If there is any bug needing fixing or feature you'd like to see, open an issue. If you're not getting the data back you expect, see below.

Reoccuring event algorithms

Accounting for all the various ways events can reoccur is a huge undertaking and there are many we missed. Right now we support the following:

• single events
• daily events (e.g. every day, every n days)
• weekly events (e.g. every Monday)
• monthly events by date (e.g. first of the month)
• monthy events by day (e.g. first Friday)

If you find an edge case that isn't supported, raise an issue, or create a fork and write your own solution.

LICENSE

MIT

react-google-calendar's Issues

The first event in a recurring series is not displayed

I've tried this several times and can't get the first event in a recurring series to display.

Using this component:

import React, {Component} from 'react';
import Calendar from 'react_google_calendar';

const calendar_configuration = {
    api_key: 'AIzaSyCAwrclIkIh_GptShODs6AMk0YE2i0xxxx',
    calendars: [
      {
        name: 'Austere Demo',
        url: '[e-mail]' // your calendar URL
      }
    ],
    dailyRecurrence: 700,
    weeklyRecurrence: 500,
    monthlyRecurrence: 20
}

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

    render = () =>
      <div>
        <Calendar
          events={this.state.events}
          config={calendar_configuration} 
          />
      </div>
}

Cannot read property 'momentLocalizer' of undefined

After setting up the project, i get this when i start the project. Inside ./node_modules/react_google_calendar/dist/index.js

Anyway to use without making calendar public?

Hello,

Love this btw. Nice work. Is there anyway to use though without making calendar public? I'm using within an app and have all the needed api keys, 0Auth creds, etc.

webpack-dev-server Missing Origin Validation

I ran npm audit and found 1 high security vulnerability.

Recurring events not in sync with google calendar

As you'll notice, both calendars (first one from google and the second one from this repo run locally) are not in sync. It seems there is a problem with the mapping of recurring events.