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.
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:
Once it’s public, go into the first panel, “Calendar Details”, and look for the customization section:
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.
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
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
I sure don’t… I haven’t come across the need yet, but I did find this: https://productforums.google.com/forum/#!topic/calendar/w-YSMmONAQY – from the comments, though, it sounds like it could be hit-or-miss. It seems like there are lots of frustrated folks out there needing Google to come up with a solution!
Good luck, though!