CSS

Responsive Google Calendar Embed

W
W3Tweaks Team
Frontend Tutorials
Dec 30, 2018 1 min read
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