You want to publish a list of upcoming events to a web site. Google Calendar provides a great way to manage that list of events. How do you get the data out of Google and into your web page?

Upcoming.js can lend a hand.


  • Pull Google Calendar events into a web page
  • Tiny (10K) and fast
  • No external dependencies
  • Intelligent defaults for ease-of-use
  • Microformat-friendly default template
  • Control the markup and appearance
  • Works both standalone and as a jQuery plugin

Quick Start

  1. Load Upcoming.js:
        <script type="text/javascript" src="js/upcoming-0.6.0.min.js"></script>
  2. Add the container to your markup:
        <div id="upcomingjs"></div>
  3. Initialize the events by passing in your calendar's public feed URL:
        <script type="text/javascript">
    Or with jQuery:
        <script type="text/javascript">
    Be sure to change the "basic" at the end of the feed URL to "full"; we need the extra info.


A Demo

Here's what Upcoming.js looks like in action: