The Journey of the University of Guelph Course Schedule to ical (.ics) – A Google Chrome Extension turned Webapp


Before I delve into the journey, let me express what the premise is. Like almost any student across the globe I have courses that I am taking in school and I have various times and locations for all these courses. Some students are given a beautiful interface for seeing this data and given lovely tools such as the ability to export to a calendar. Our system gave no such option, and was displayed in a quirky format.

I wanted all of my courses added into my [Google Calendar][1] so that I could get all the lovely features that come with Google Calendar, such as notifications, syncing, location support (can quickly pull up location in [Google Maps][2]). Moving all of these courses over would be time consuming manually. This leads into the journey…


I needed a way to get my courses into Google Calendar, and I thought others may benefit from such a tool as well so I sought out to make a browser extension which allowed you to export a course schedule simply by being on my school’s schedule view. A new button was added that looked native to the system being used and allowed you to simply download a ical (.ics) file which can be exported into almost any calendar application. Using fancy recurring events and everything. Nice and simply, no hassle for the user.

At least, I thought there was no hassle at first. The problem was that I was isolated to only helping ease the usage of our system if a user was on Google Chrome. Many people at Universities are mac users, and I realized a decent portion of people were using the default Safari. Before going into the problem of cutting off users, let me show you what exactly I added to the page:

Example of Export Schedule Button

Of course this button was not easy to find when you first started using the plugin. There were pictures in the Google Chrome screenshots advertising the extension, however as I should have assumed most users did not look at that. I’m still very far from being any kind of user interface expert here!

So the Google Chrome extension had to go. It would not be ideal to make the browser extension that supports all of the browsers as it gets harder to support such a product when working solo on this, and also came back to a similar problem of inconvenience. The effort involved for someone to add an extension to only be used for a few seconds seemed pointless. You were wasting a lot of the time you were trying to save. Not to mention you’d like only ever use the extension a whopping two times in a year so it was a waste of resources to even really want to keep installed.

I opted to keep what was working, the ical exports, and instead switch over to a webapp. I noticed: “hey, all of these course pages have the same format”. This meant that I could then get out some regular expressions and simply play around with parsing out the exact content I got before into the Google Chrome extension. In fact, with the help of [regex101][3] I managed to get some nice regex setup and working leaving mostly just the ical part left.

Here is where I learned some of the importance of writing modular code. I was able to use almost unaltered code from the Chrome extension in this webapp. I just had to pass my old functions the correct data that was now parsed via regex. In the Chrome extension I actually injected the Javascript into the page and directly used one of the pages variables containing the course data.

In total since I could use most of the code from my Chrome extension I actually only spent a few hours making the web app which I have named “[Course 2 Calendar][4]“. The project is also [open sourced][5] for all to see and use. Who knows, maybe you want to apply my hacked out code to your own project specific to your school?

I should also mention that I reached out to [Trackjs][6] which graciously provided me a free account with their service as I am running a not for profit open source project. Using this tool I could work to ensure my export strategies for the ical download providing was working properly on many browsers and try to eliminate some bugs appearing on some browsers. The problem with Javascript in browsers is that some browsers try to nicely fix errors and not mention this which means there are problems on other browsers. It also helps as I have no idea what a user may enters to cause an error so it is great to have a log of the stack trace when an error is thrown. Here is an example of my messages page

trackjs messages image

[1]: “” [2]: “” [3]: “” [4]: “” [5]: “” [6]: “”

Google Chrome Developer Dashboard notification annoyance Email Print Page Cleaner Updated v1.1