🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Reusable react component that pulls events from your google calendar.

Others React

Documentation

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'), );

You May Also Like