How can I display the events from two Google Calendars in a single iframe?

Question

I have two Google Calendars on the same account. I've already set them to public and retrieved their embed codes from the "Integrate calendar" section.

I want to display the events from these two calendars on a single iframe.

I found an old video showing how to do this, but it seems to be outdated. Is there a current way to do this?

Answer 1

To do this, you need to combine the src strings from the embed codes. So if you want to display these two calendars:

<iframe src="https://calendar.google.com/calendar/embed?src=555555555555555555555%40group.calendar.google.com" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

<iframe src="https://calendar.google.com/calendar/embed?src=FAKEEMAILADDRESS%40gmail.com" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

You would combine them like this, using an ampersand:

<iframe src="https://calendar.google.com/calendar/embed?src=555555555555555555555%40group.calendar.google.com&src=FAKEEMAILADDRESS%40gmail.com" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Answer 2

You can do this using the old embed format. I've tested this today and it still works.

<iframe 
src="https://calendar.google.com/calendar/embed?ctz=Europe%2FLondon&src=<cal1>&color=%23BE6D00&src=<cal2>&color=%232F6309"
style="border: 0" width="600" height="800" frameborder="0" scrolling="no">
</iframe>

<cal1> and <cal2> should be public calendars, the format is something like

xxxxxxxxxxxxxxxxxxxxxxxxxx%40group.calendar.google.com