Crevier's Tech Toolbox
Home CyberSecurity

responsive Google calendar

This is a demo of how to display a nice-looking Google calendar on both larger and smaller screens. The concept here is that we're not actually going to make the calendar itself responsive. Instead, we're going to detect the orientation of the page, and then display a version of the calendar that looks nice.

Start by using Google's tools on how to share your calendar with the public. Now, in the 'Integrate calenar' section of the calendar settings, use the "Customize" button to create two versions of that calendar: one that looks good on a larger screen and one that looks good on a smaller screen.

When creating the embed code for the larger screen, set the default view to "Month". When creating the embed code for the smaller screen, set the default view to "Agenda".

You should now have two 'iframe' codes. When you view the source of this page, you'll see where you should include each so that they display properly.

Turn your device or resize your browser window to see what happens to the calendar below when it changes from portrait to landscape and vice versa.

• View the source of this web page to get the code needed to reproduce the feature explained. •