Timeline that Google Calendar with Jquery (gcal-timeline)

Created a new github repo the other day to build out a simple jQuery plug-in that accepts a calendarId from a public google calendar and builds out a nice looking timeline of pasts events. That’s right, jQuery is still really useful.

I found this timeline concept pretty useful for displaying & tracking a list of completed milestones for a project or even past career accomplishments. 



Try it out here: DEMO 

More info + source code @ https://github.com/bradoyler/gcal-timeline 


User-Authenticated Event Tracking with jQuery + Google Analytics

You probably already know about Google Analytics, and if you use it enough you may even know about Event Tracking with Google Analytics , but haven’t quite figured out an easy and useful way to put it to use, so here’s an idea.

I typically use an MVC framework like Ruby on Rails or Asp.Net MVC to build web apps. However, any framework that allows you to authenticate a user (maybe PHP, Node.js, or Python) and return the username to your html view\page will work for this solution.

Once you have Google Analytics & jQuery working on your page, all you have to do is put this little jQuery nugget on your page:

*example uses ASP.Net Razor syntax to include the authenticated user’s username*

Now, you can easily create a custom report in GA, that looks like this:


Obviously, this can be pretty useful, since you’re now able to track the users that are logged onto your site and even try to understand user’s behavior flow.

Btw, I should disclose that storing “personally identifiable information” is against the GA terms of use, so storing a username could result in getting your GA account banned


Google Calendar Reader : jQuery Plugin

I was really surprised that I couldn’t find a plugin or widget that already did this, so I figured I’d make a jQuery plugin to read a public google calendar feed and custom format it so that it can be display on your site and have your own styles applied. Here’s how the gCal reader plugin works.

Here’s a link to the github repo: https://github.com/bradoyler/GoogleCalReader-jquery-plugin

Demo is here: http://w3portals.com/SDevents.html

Screenshot: (i know, its ugly)