Responsive Google Calendar Embed

This demo shows how to embed a Google Calendar so that it is responsive. The basic technique is to wrap the iframe embed code you get from Google with a div. We give that div the class name googleCalendar. Then we set the Google Map iFrame inside of that to cover the width and height of the googleCalendar div. You can change the width and height of the googleCalendar div and the calendar till change along with it.

Tutorial/codes - Demo

Author:
Christopher Stein

Created:
NOVEMBER 13, 2017

Made with:
HTML, CSS

Find the Demo

See the Pen Responsive Google Calendar Embed by Christopher Stein (@profstein) on CodePen.

back to top