React Google Calendar Events List

Setting it up w/ your calendar

Pass the prop apiKey to your Google API Key, then set the prop calendarId to your desired calendar's ID (find this from calendar.google.com -> my calendars -> settings -> the calendar you want to map -> Calendar Address -> Calendar ID).

Example

https://codesandbox.io/s/xrwl1mk31z

import React from 'react';
import { render } from 'react-dom';
import Calendar from 'react-google-calendar-events-list';

render(
  <React.Fragment>
    <div>
      <h2>Function as children</h2>
      <Calendar
        calendarID="en.orthodox_christianity%23holiday%40group.v.calendar.google.com"
        apiKey="AIzaSyAunY2R4utMXaWe1uAxIRdcRsbUlI8yhL8"
      >
        {({ loading, events }) =>
          loading ? <div>loading</div> : <div>{JSON.stringify(events)}</div>
        }
      </Calendar>
    </div>
    <div>
      <h2>Default output</h2>
      <Calendar
        calendarID="en.orthodox_christianity%23holiday%40group.v.calendar.google.com"
        apiKey="AIzaSyAunY2R4utMXaWe1uAxIRdcRsbUlI8yhL8"
      />
    </div>
  </React.Fragment>,
  document.getElementById('root'),
);