Displays upcoming events from public Google calendars in a customizable fashion.
Check out the live demo or run the
- Make sure you have NPM and Grunt installed.
- Set up Upcoming.js and run it:
git clone https://github.com/kadams54/upcomingjs.git
Include the code:
'#my-upcoming', // Element selector
'MY GOOGLE CALENDAR API KEY', // Google Calendar API key
'MY CALENDAR ID' // Google Calendar ID
Upcoming.js requires three pieces of information, passed in as the three
- The selector for the DOM element into which Upcoming.js should render
the event list.
- Your Google Calendar API key.
- The public calendar’s ID - note that the calendar must be made
The first bit of information, the DOM selector, is easy. Unfortunately
the last two require a bit of work.
Obtaining Your Google Calendar API Key
Hat tip to Full Calendar for these instructions:
- Go to the Google Developer Console
and create a new project (it might take a second).
- Once in the project, go to APIs & auth > APIs on the sidebar.
- Find “Calendar API” in the list and turn it ON.
- On the sidebar, click APIs & auth > Credentials.
- In the “Public API access” section, clikc “Create new Key”.
- Choose “Browser key”.
- If you know what domains will host your calendar, enter them into the
box. Otherwise, leave it blank. You can always change it later.
- Your new API key will appear. It might take a second or two before it
Making Your Google Calendar Public
Finding Your Google Calendar ID
Upcoming.js was created by Kyle Adams, with help from these contributors.
- None listed yet. Why not be the first?