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.

Find the Demo

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

• « Previous
  Simple Calendar build with ReactJs and Flexbox
• Next »
  Semantic HTML/CSS calendar-style date display