AngularJS Mashup – Google Calendar [Part 2]

Welcome back. This is a continuation from AngularJS Mashup – Google Calendar post from a couple of weeks ago. To be candid, I am new to AngularJS and far from an expert on Javascript. My goal is to share what I’m learning and to hopefully grow with whomever chooses to participate in my posts. I welcome your comments and suggestions for improvement.

The purpose of this series is to demonstrate how I used AngularJS to display the events of a public Google Calendar into my son’s game schedule website. It’s a mashup of Google services. Specifically, Youtube, Google Calendar and Google Maps. I’ll focus on Google Calendar for the next couple of posts. Let’s jump in, shall we?

The first thing I did was create a new Google Calendar and set it to be publicly available. Then I added all of my son’s game information to the calendar—opponent name in the Title field, event times, location of game and a brief description. Back in the day, I would have considered my job done. But, that wouldn’t be any fun, now would it?

On to the website…

I’ll assume you have a website setup with Angular ready to roll. If not, there are tons of great tutorials for learning Angular. We’ll need to setup a factory and a controller to feed our view. Let’s start with the factory.

myApp.factory('$calendar', function($http) {
    list: function(maxresults) {
      // set maxresults default to 1
      maxresults = maxresults || 1;
      // set the calendar address to a variable
      var calendarId = '';
      return $http.jsonp('' + calendarId +'public/full?alt=json-in-script&callback=JSON_CALLBACK&orderby=starttime&max-results=' + maxresults + '&singleevents=true&sortorder=ascending&futureevents=true');

Here’s how to find your Google Calendar ID, and an explanation of the url in the return statement above.

Next we turn to our controller:

myApp.controller('ScheduleCtrl', ['$scope', '$http','$calendar', function($scope, $http, $calendar) {
    // set our maxresults parameter from our 
    // factory above to return 15 results
      $scope.calendarList =;

Can’t get much simpler than that. Our controller requires $scope, $http, and $calendar (our recently created calendar factory) services injection. For now, we’re not doing any sort of error handling. We’ll just assume Google will serve us up some quality JSON. And finally, we’ll set our data to a variable called calendarList.

In my next post, I’ll go over binding the JSON data to the view.


AngularJS Mashup – Google Calendar

Before I begin this part of the process, I should briefly introduce the Google Web Starter Kit. Because this was a dev experiment, and not a design challenge, I decided to go a with front end framework—a perfect opportunity to give WSK a try. I’ll save the details for a later post, but let it be known that Google’s WSK is amazing and worthy of your attention.

The Calendar process started with a Google Calendar I set up for my son’s football game schedule. The idea was to share it with my wife so we’d be on the same page going in to each week. It occurred to me that our extended family would be interested in the schedule, too. So, I made it publicly available. That’s where the fun began.

My next step was pulling down the WSK and getting it ready for AngularJS. Not much involved there. Add angular to your project, and you’re pretty much good to go. Then, it was time to find a way to get Google Calendar data into my project. Because I knew that Angular was awesome at consuming JSON API’s, I went on a little hunt and found that calendar data can be output as JSON using the following format:

In the next post, I’ll demonstrate how I pieced things together in the Angular Controllers and Views. Stay tuned…

AngularJS Mashup

I’ve been trying to find ways to help get a better understanding of AngularJS. As I’ve done in the past, I’ve turned to my son’s interests as fuel to learn a new development technique. In the next few posts, I’ll share how I used Google Calendar, Google Maps and Youtube to mashup this app the shows his game schedule and video snippets of his that have made the media.

More to follow, so stay tuned.