I really enjoy google and their vast array of integrated features. The only thing that they really lack is a mission for responsive design. They make adding a google calendar easy by giving you all sorts of options for adding your google calendar to your site. Simply go through a few steps in your google “Calendar settings” and you will get an iframe that you paste right onto your site.

Sounds great, but the problem is that the calendar is not responsive. It comes with a standard width of 800px which is great for desktop but not for mobile, unless you have an iPhone6 Plus maybe.

I have found and used “solutions” that squeezes the width in order to have it fit just right for the desired screen. The problem with this, is that it was not designed for small screens so it really isn’t readableĀ for the user. That is a big problem.

I really only see two options.

1. Us a Plugin!

Why do all the work yourself when you can have someone else do it for you? If you are lucky, you have your site built on WordPress and can pick any of the great options available to you. Some of those options would be:

2. Create 2 Google Calendars

This option gives you the ability to change the view based on the screen width. It’s a pretty simple idea. The idea is that you upload 2 iframe codes of the same calendar but with different default views. Just set up two different iframes. One for desktop and one for mobile.

Desktop: You can basically leave these options as their default with the default view set to “desktop” and the width set to 800px.
Mobile: You can set the default view of this one to “Agenda” and the width to about 300px.

Now, the magic happens in your media queries. You should hide the desktop view on about 850px and show the mobile view. Simply wrap your iframe’s in div’s that you can call in your media queries.

The benefit of this is that you are actually using google calendar’s setting to create this, which people trust. The bad part is that you are actually loading two calendars which slows down the page speed for your user. Honestly, it might not be worse than adding a plugin but I haven’t done that research yet.

In the end, every situation is going to be different. So use your best judgment on which one works best for you and your client.