Displays upcoming events from public Google calendars in a customizable fashion.

View the Project on GitHub

Upcoming.js Build Status

Displays upcoming events from public Google calendars in a customizable fashion.


Check out the live demo or run the demo locally:

  1. Make sure you have NPM and Grunt installed.
  2. Set up Upcoming.js and run it:
  git clone https://github.com/kadams54/upcomingjs.git
  cd upcomingjs/
  npm install


  1. Include the code:

     <script src="upcoming.min.js"></script>
  2. Call upcomingjs:

     '#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 parameters above:

  1. The selector for the DOM element into which Upcoming.js should render the event list.
  2. Your Google Calendar API key.
  3. The public calendar’s ID - note that the calendar must be made public.

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:

  1. Go to the Google Developer Console and create a new project (it might take a second).
  2. Once in the project, go to APIs & auth > APIs on the sidebar.
  3. Find “Calendar API” in the list and turn it ON.
  4. On the sidebar, click APIs & auth > Credentials.
  5. In the “Public API access” section, clikc “Create new Key”.
  6. Choose “Browser key”.
  7. If you know what domains will host your calendar, enter them into the box. Otherwise, leave it blank. You can always change it later.
  8. Your new API key will appear. It might take a second or two before it starts working.

Making Your Google Calendar Public


Finding Your Google Calendar ID



Upcoming.js was created by Kyle Adams, with help from these contributors.


Sites Using This Widget