At the May meeting, we continued looking at ways of embedding a Google calendar into a web page. Our goal is to make the calendar part of a page in a way that is responsive and mobile-friendly.
For a general overview of how to use Google Calendar, try this YouTube video called Google Calendar Tutorial 2015 – Quick Start.
Google Calendars are embedded using code that is generated by the calendar site itself. Just as videos are embedded in pages, the Calendar uses an inline frame (iframe). For more on iframes, see:
We next worked on making the embedded calendar responsive, because on a small screen, a user would have to do a lot of scrolling. There are plenty of tutorials out there on making an iframe responsive. We used one, and while it worked, all it really did was make the calendar smaller as the browser window shrank, and the calendar became difficult to read. It was responsive but not mobile-friendly.
To get to the next level, we used a technique outlined in a blog at SquareSpace. This approach embeds two versions of the Google Calendar, a monthly view and an agenda view — just a list, so it fits on a small screen. Each is put in div that is styled display:none depending on the size of the browser viewing area. Using a media query, we check for the size of the viewing area and then either the small version or the large version is allowed to display.
Our first sample did not work in the real world when checked on a phone, and the solution was to add a viewport meta tag. Once we did, the monthly calendar showed on larger screens and the agenda list on phones.
For more on the viewport meta tag, see:
- Wikipedia on Viewport
- The viewport meta tag- the key to preparing a page for mobile devices optimization
- Configure the Viewport
We will finish up next month with some fine points and with a whole different way to use Google Calendar on a page. We will talk about things like API and XML.