August 19, 2016

standalone html link for multiple Google calendars

I teach several classes and I create individual Google calendars for each class. Google makes it pretty easy to embed multiple calendars into a single webpage- in fact, there are tools right in Google calendar to generate the appropriate embed codes. But I also wanted a standalone url for that same embedded calendar and getting that takes a little tweaking. To be clear, it's easy enough embed multiple Google calendars into a single webpage (follow the link above or these instructions), but I'm interested in getting a a standalone url such as this one.

Step 1: 
Follow the steps for generating the embed code. Make sure that you give each calendar the colors you want, etc. You'll end up with an iframe code that looks something like this:

<br>
<iframe src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=professorpok%40gmail.com&amp;color=%23B1365F&amp;src=1saupj867uga40dguoscdpaqo8%40group.calendar.google.com&amp;color=%23BE6D00&amp;src=hpr4cabte8qfuvbq6q52cbh3sk%40group.calendar.google.com&amp;color=%231B887A&amp;ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</br>

Step 2: 
Copy the entire link within the " " (the highlighted portion)
src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=professorpok%40gmail.com&color=%23B1365F&src=1saupj867uga40dguoscdpaqo8%40group.calendar.google.com&color=%23BE6D00&src=hpr4cabte8qfuvbq6q52cbh3sk%40group.calendar.google.com&color=%231B887A&ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"

Step 3: 
Delete from "height=600" to just before the first "src=" (delete the pink highlighted)
https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=professorpok%40gmail.com&color=%23B1365F&src=1saupj867uga40dguoscdpaqo8%40group.calendar.google.com&color=%23BE6D00&src=hpr4cabte8qfuvbq6q52cbh3sk%40group.calendar.google.com&color=%231B887A&ctz=America%2FNew_York

Step 4: 
From there, delete all the "amp;" (again, delete the pink highlighted).
https://calendar.google.com/calendar/embed?src=professorpok%40gmail.com&amp;color=%23B1365F&amp;src=1saupj867uga40dguoscdpaqo8%40group.calendar.google.com&amp;color=%23BE6D00&amp;src=hpr4cabte8qfuvbq6q52cbh3sk%40group.calendar.google.com&amp;color=%231B887A&amp;ctz=America%2FNew_York

The final link should look like this and you should be good to go:
https://calendar.google.com/calendar/embed?src=professorpok%40gmail.com&color=%23B1365F&src=1saupj867uga40dguoscdpaqo8%40group.calendar.google.com&color=%23BE6D00&src=hpr4cabte8qfuvbq6q52cbh3sk%40group.calendar.google.com&color=%231B887A&ctz=America%2FNew_York

I owe thanks to the discussion in this post for the pointing me in the right direction.

No comments:

Post a Comment