Making Google Calendar a responsive embed with Mobile support

Google Calendar is amazing, but the embed code is pretty old.  They haven't updated it in many years.

Since everything is Mobile First today, I needed a way to display better on cell phones.

The following code does the following:

  • Define a Responsive Cal types so that it uses 100% of the frame
  • Define a DeskContent and a PhoneContent sizes (with a width of 768 being the switch point) 
  • Wrap all of it in the Responsive Call Div so it all resizes automatically
  • Display the Month view of the calendar if it's a desktop resolution
  • Display the Agenda view of the calendar if it's a mobile resolution


I've formatted this so that it can be placed inline in your HTML file.

The first Embed should be your calendar code set to the Month view.

The second Embed should be your calendar code set to the Agenda view.

Comments

Popular posts from this blog

Embed a Slideshow from Picasa Web / Google Plus

WPAD does not resolve in DNS