Menu icon Foundation
Add Google Calendar

I want to show a Google calendar on my site. I am looking for the best methods to use with Foundation. I current have an Iframe , but it doesn't not resize very well. Any suggestion will be appreciated .

Google calendar

I want to show a Google calendar on my site. I am looking for the best methods to use with Foundation. I current have an Iframe , but it doesn't not resize very well. Any suggestion will be appreciated .

Bob Sawyer almost 5 years ago

Unless you want to get into more complicated Google Maps API stuff, stick to the iFrame. Just set it to a width of 100% and it should conform to the size of its container. You might need to play around with the height depending on viewport size, which you can do by setting a comfortable height for each screen using media queries.

<iframe class="googlemaps" width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="[google maps source]"></iframe>
// Small screens
@media only screen {
  iframe.googlemaps { height:200px; }
} 

// Medium screens
@media only screen and (min-width: 40.063em) {
  iframe.googlemaps { height:240px; }
} 

// Large screens
@media only screen and (min-width: 64.063em) {
  iframe.googlemaps { height:320px; }
} 

// XLarge screens
@media only screen and (min-width: 90.063em) {
  iframe.googlemaps { height:360px; }
} 

See also this article which describes how to make a fluid iframe without the use of javascript:
http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/

Cheers,
Bob

Snig almost 5 years ago

I would highly recommend Adam Shaw's Full Calendar http://fullcalendar.io/. I have used this in a few Foundation based sites now and it works very well (refer http://www.northcanberrafutsal.com.au/content/calendar.html for one example). Cheers, SImon

Rafi Benkual almost 5 years ago
Alexander Swift about 1 year ago

Just thought about the idea of adding a google calendar to my site. Tell me, will this be relevant on the website selling tickets for various events? Should I bother with this? Thank you.

Alexander Swift about 1 year ago

Just thought about the idea of adding a google calendar to my site. Tell me, will this be relevant on the website selling tickets for various events? Should I bother with this? Thank you.

Alexander Swift about 1 year ago

Just thought about the idea of adding a google calendar to my site. Tell me, will this be relevant on the website selling tickets for various events? Should I bother with this? Thank you.

James Smith about 1 year ago

This is a very informative and great post thanks!

Custom Vinyl Windshield Decals and Stickers for Cars