Embedding a Google Calendar is a great way to share your business’ events, schedule of classes, or whatever you use Google Calendar for.

However, the default one-month-at-a-time view may not work for you. Would you rather display just a week at a time? Is that possible. It sure is. And it’s pretty easy to do, too.

First, check your privacy settings

Google Calendars are, by default, private. But if you want to share your calendar with the world, you’ll need to change that.

On the list of calendars in the left sidebar, click the little triangle that shows up when you hover over the name of the calendar you want to share. (And if you don’t see the list of calendars, click the triangle next to My Calendars.

gcal

That’ll open up a three-panel, not-so-obvious-that-it’s-three-panels, options screen. You’ll want to check first that your calendar is public, and that’s in the middle panel:

gcal01

Once it’s public, go into the first panel, “Calendar Details”, and look for the customization section:

gcal02

From there, it’s easy: all of your options are laid out on the left, and once you’ve chosen what you want (in this case, weekly view), the code in the box on the top right will adjust itself.

gcal03

Copy and paste that code into your WordPress page (using the Text tab, not the Visual tab! But you knew that already, right?), and you’re good to go.

What about responsiveness?

If you’re using a responsive theme (and you most likely are, or most likely should be), you might notice that when you check your schedule on your phone, it doesn’t look so good. Bummer, huh?

Well, we’ve got a fix for that, too.

I found this solution at ThemeLoom, and it should work for any iframe code, not just Google Calendar’s. I found I needed to adjust the css a bit to get it to display how I wanted it to. So, here’s what I used:

Wrap your iframe in this:

Add this css to your custom.css file:

Again, you may have to play with it a bit, too, but this should get you heading in the right direction.

featured image photo credit: Andrew Morrell Photography via photopin cc

Reader Interactions

Comments

  1. Hi, do you have code to hide the weekends when the calendar is embedded on a website? the settings of the calendar don’t copy over if you hide the weekends in the calendar settings

Leave a Reply

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