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.
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.jshas 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