The ProFromGo team recently completed a project for our new friend Dave Nelsen over at Dialog Consulting. The main goals of the project were to give the Dialog site a makeover of sorts, to make it responsive to mobile devices, and to make sure it was all powered by our favorite CMS, WordPress.

Dave also opted for a Google Apps package that I setup and deployed for his domain to include all the run of the mill Google Apps goodies like Gmail, Google Calendar, and etc.

As a social media speaker and strategist, Dave is a guy who is constantly on the move so this cloud based solution really suited his business model and lifestyle. He does speaking engagements and presentations all over North America with a traveling schedule that could easily rival Obama’s.

Due to Dave’s insane speaking schedule, getting his Google Calendar embedded on the website so that his clientele, friends, family, and other colleagues could all keep an eye on him and his whereabouts, in a way where he could update it from any of his devices on the fly, was a major area of concern for this project.

Considering that Google outright recommends responsive web design, I find it a bit interesting that many Google products are still only available in fixed-width formats. But if you read this far, I’m sure you’re hoping there is a solution in the near future, and I assure you… there is!

Our solution for Dave that allowed us to make Google Calendar responsive involved two parts.

Part One: Create a Responsive iFrame Container

I borrowed a bit of code and the idea itself from another blog post I had come across in my adventures of  seeking out a solution.  You’ll see if you take the time to visit that post it mainly addresses the entire issue as covered here in part one, but I didn’t write this whole blog post just to share a solution I had found elsewhere… I take it a step further in part two… That being said, simply for convenience’s sake here is the code I borrowed from ThemeLoom, I’m hoping they won’t mind considering I threw them two links and cited my source :).

First, add this code to your CSS stylesheet:

[code]
/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/code]

And there is a Part “1a,” you’ll want to wrap your Google Calendar embed code inside of a container that tells your site this  thing should resize itself a bit:

[code]

[/code]

Part Two: Take Advantage of Bootstrap’s Available Classes, and Google Calendar’s Customization Options

Once you’ve setup your responsive iframe container, there’s still a few more things you can do to tweak this a little tighter for an optimal user experience for your visitors.

I took advantage of a few of the available classes in Bootstrap and combined them with a few of the customization options in Google Calendar’s embed tool which when blended together, made for a perfect user experience.

The first thing to familiarize yourself with in order to capitalize on the existing Bootstrap CSS responsive utility classes would be this table, which I screen captured for convenience sake:

Responsive Utility Classes

The two responsive utility classes that will be of special use in this application will be “visible-phone” and “hidden-phone.” Using these two options and the Google Calendar Embed Helper I actually got the iFrame embed code for TWO different versions of the calendar:

  1. A full monthly view of the calendar which I made visible to desktops and tablet users
  2. A more narrow agenda view of the calendar that I used to show mobile phone users.

P.S. – You can get to the Google Calendar embed helper by logging into your Google Calendar that you’d like to make responsive and following this breadcrumb trail:

  • Gear Icon -> Settings -> Calendars -> click the title of the calendar you’d like to embed

Once you’re on this page you’ll see a whole section that is described as “Embed this Calendar” and over to the right you’ll notice a link that says “Customize the color, size, and other options.”

The tool will look like this:

Google Calendar Embed Helper

The core concept here is to show the bigger “Calendar View” of your Google Calendar on tablets & desktops, and a more narrow “Agenda View” to visitors using a mobile phone.

You will probably want to toy around a little bit with the width and height options in order to season to taste, but you can see what I eventually ended up with quite easily by scouring the final code I pasted below.

And without further adieu, here’s the final code that I embedded on Dave’s website so you can see the finished product… you can also take a peek at the actual responsive web page where the Google Calendar is embedded and play with the browser width by resizing to see the end result in action:

[code]

[/code]

Now Dave can manage his Google Calendar from his mobile devices, laptop, desktop or anywhere else he has an Internet connection and almost as soon as he saves a new event, his website’s “Speaking” page is near instantly updated. Even better, visitors checking out his site on mobile devices see his awesomely responsive custom WordPress theme complete with is up to the minute speaking schedule.

If you found this post helpful, please leave a comment or give me a Tweet, Like, or Share!

New Call-to-action
An Intro to Closed-Loop Marketing: Learn More

Join the conversation:

Jared

I love this!! Quick question, I noticed on my iPAD that the Calendar Cells in your example keep stretching down after the page has loaded. This has the effect that eventually you only see a week worth of info. It happens quick resulting in loss of view of a week every 14 seconds. Any idea what may be causing this?

Thank you,
Jared

Chris Vendilli

Hmm. Good catch. Very strange indeed. I didn’t notice this before when I first wrote up the blog post and I definitely tested it on my iPad as well.

I’m seeing what you’re describing but not certain what’s causing it…

Another idea to fix this may be to have three different options viewable dependent on phone, tablet, or desktop. You can use the bootstrap CSS to differentiate all three and then rather than use that responsive container, instead just use a different fixed width for each scenario…

Bobby

Chris,

Thanks for this! I am working for a non-profit and was able to get the sizing working, however, as with your live site linked above, when I resize the screen smaller, I do not see the Agenda view, just a condensed full calendar.

Any suggestions?

Chris Vendilli

What browser are you using?

In all my testing the live site mentioned shows the agenda once the browser is resized to cell phone-ish width. Thanks for the comment, even better would be if you could post a link to your example in action so long as it’s rated G.

Yves Dreger

Hey Chris,

thats great.
But i have a problem. If i looked at my site it shows me everytime two calenders.
1. the monthly
2. the Agenda

Do you have an idea?

Chris Vendilli

Hi Yves,

I can only speculate but based on what you’ve told me my first suspicion is that you may not have properly utilized the bootstrap CSS classes for showing and hiding certain snippets of content.

laura-ann

i found your site because you left an answer on the rapidweaver forum on how to make a google calendar responsive. my question is where in rapidweaver would i put the css you talk about?

Chris Vendilli

Hi Laura-Ann,

The same stylesheet that’s used for all of your other fonts and styles is where you’d want to put the CSS described in this blog walkthru.

Amanda

I am a teacher and I have always used blogger as my classroom website platform. I have come to love it, until recently… Our school just went 1:1 with Apple iPads and well, so much isn’t compatible. I have a calendar setup to be embedded on a page and it shows on desktops but not the iPads or iPhones! I tried the codes, but it isn’t working. Any suggestions?

Chris Vendilli

When using a service like blogger you’re going to have much less control over CSS classes and some of the other elements necessary to make not just the calendar responsive but your blog as a whole.

Eric

Hello Chris, I implemented the solution you proposed and it works very well. Thank you very much for your expert work and advises. It is much appreciated. So thanks!

However, I still have a little issue: I tested the site on iPad, iPad mini, iPhone, MacBook 13″ and iMac 27″ with Safari, FireFox and Chrome.

On desktop screens everything looks great. But on both iPhones and iPads when I resize from Landscap to Portrait, I loose the bottom of the calendar and the cells are compressed. BUT, When I refresh the page (or load it initially from Portrait mode) everything looks okay. !!

Do I have to “play” with the padding-bottom: 56.25%; ?

Do you have any idea Chris, please?

Thank you!

Chris Vendilli

Hi Eric,

I’m not sure what might be causing that issue and I have heard of many others having similar problems, including a few of our clients. If we come up with a solution in the near future I will post back here.

Eric

Hi Chris,

Thank you for your answer. That is really cool to be able to talk with a real expert. I’ll keep monitoring the forum… Is the padding-bottom: 56.25%; parameter important?

Thanks.

Chris Vendilli

Hi Eric,

Feel free to play around and tinker with any of the elements or parameters in this walkthru to season it to your taste. I’m certain there’s more ways than mine to get it clicking the way you want.

I think in this example the padding bottom just gives the calendar some breathing room from the content that follows after it…

Hal Lee B

I found this site after Googling “google embeddable helper.” For me the calendar does not display the navigation controls at all. I’m pasting the code into the source code tab for a Google website, so it seems like it should be compatible.

Would love to implement your customizations in the future, but at this point I just want the navigation controls to work!

Chris Vendilli

When you’re getting your code from the embed tool toward the upper left area there’s a section titled “Show” and underneath it are several tick boxes for your options. Do you have the tick box checked next to “Navigation Controls” ??

That’d be my first guess… I know that seems obvious but sometimes the simple hunch is the right one.

Jake

Brilliant, I’m looking forward to using this. I love how this type of thinking allows sites to stop having “mobile versions”, and to just respond to the user’s screen.

Reply

Your email address will not be published. Required fields are marked *