I've managed to successfully embed a Google calendar into a website using an iframe. Everything is scaling properly on various browsers, however, I've encountered an issue with the calendar overflowing vertically when rotating an iPhone from portrait to landscape and back to portrait mode. Unfortunately, I am limited to only using HTML and CSS on this site due to it being a CMS.
Here is the HTML code being used:
<p class="iframe-container"><iframe allowfullscreen="" frameborder="0" src="https://calendar.google.com/calendar/embed?" width="100%"> . </iframe></p>
Below is the CSS being utilized:
.iframe-container {
width: 100%;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}