Skip to main content
  1. Home
  2. Support
  3. Questions

Embed google calendar

Tim Sager By 
April 22, 2013

How can I embed a Google Web Calendar on a basic page? 

google provides the following html

<iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=0gdiq5m4o3gqii1knq4j6nvidg%40group.calendar.google.com&color=%23125A12&ctz=America%2FChicago" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

Any Tricks?

Tim

 

Official response from

You can embed a Google Calendar on a basic page — or any page type — by adding the iframe code directly to the page's Template. Editing a page's template gives you direct control over the HTML of the page.

To edit a page's template, click on the "Template" link as pictured below:

Screenshot_4_23_13_9_32_AM-2.png

Share this post

Showing 17 reactions

How would you tag this suggestion?

Sign in with

Please check your e-mail for a link to activate your account.
  • Jay Shepley
    tagged this with Helpful
    posted 2018-11-15 10:50:06 -0800
  • Ian Patrick Hines


    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    responded with completed
    posted 2016-06-09 13:58:01 -0700
  • Taylor Pineiro
    NationBuilder employee
    commented
    HI Christine! It looks like Sara from our Community Strategist team got back to you via email but I wanted to past her answer here for others as well!

    Try to ‘save and publish’ rather than ‘save draft’ and that should work.

    Also, we have a third party app, Tockify, which is easily editable in JavaScript and makes great customizable calendars: http://nationbuilder.com/tockify
    posted 2016-04-11 14:33:59 -0700
  • Christine Jackson
    commented
    It’s not working for me. I embedded the code into the calendar template. Once you see the preview, it looks great! The second I clicked “publish” I get a white screen! Then I created a regular HTML page, placed the code in the template, same thing happened.
    It would be nice to see a calendar that looks like a calendar instead of a long thread of events, especially recurring events. Does not look clean or customized at all!
    posted 2016-04-04 12:36:48 -0700
  • Kevin Coleman
    NationBuilder employee
    commented
    Thanks for the awesome tips @richard and @christian!
    posted 2015-07-27 16:45:48 -0700
  • Richard Willson
    commented
    Another approach is to store your Google Calendar URL as a menu item instead of putting it on a page. You get the same result without having to edit the template!
    posted 2015-07-25 11:50:28 -0700
  • Michelle Mahoney
    tagged this with Not helpful
    posted 2015-05-20 11:44:32 -0700
  • Eugene Stanton
    tagged this with Not helpful
    posted 2014-05-19 19:14:22 -0700
  • Tim Sager
    tagged this with Important
    posted 2013-08-31 07:31:13 -0700
  • Tim Sager
    tagged this with Important
    posted 2013-08-27 07:50:16 -0700
  • Christian Berrigan
    commented
    Another tip: Here is an article on how to embed multiple google calendars into a single calendar on a web page. Read all the way to the end because the end is the easiest and most elegant solution. Also, in the utility they show, you CAN type “100%” into the width parameter and the entire embed code you copy will have multiple calendars and dynamically size.

    http://blog.ouseful.info/2008/12/04/displaying-events-from-multiple-google-calendars-in-a-single-embedded-calendar-view/
    posted 2013-06-13 19:51:57 -0700
  • Ian Patrick Hines


    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Good find, Christian!
    posted 2013-06-13 14:19:32 -0700
  • Christian Berrigan
    commented
    TIP: How to make embedded google calendar dynamically size in Version 2 theme?

    Look at the template on a calendar page for the code which wraps the google map. Wrap the google calendar embed code in the same div/class tag structure as the map is wrapped in. Then, in your embedded calendar code, change the static width from a number to “100%”. Leave a static number for the height.

    So far, it seems to work great!
    posted 2013-06-13 13:04:28 -0700
  • Ian Patrick Hines


    Certified Architect
    Certified Expert
    Certified NationBuilder Architect Certified NationBuilder Expert
    commented
    Hey Peter — I just checked your nation, and from what I see it looks like you’ve been able to embed your calendar successfully. Are you still having trouble? If so, please don’t hesitate to contact your point person — who can provide you with more direct assistance.
    posted 2013-06-10 14:10:38 -0700
  • Peter Nelson
    commented
    I tried this placing the iframe code after the {{ page.basic.content }} section of the template to no avail. I don’t see the Google calendar when the page is published. Can you be more specific about embedding the iframe code for Google Calendar in the template code area? Thanks.
    posted 2013-06-10 13:55:31 -0700
  • Tim Sager
    responded
    posted 2013-04-23 09:38:10 -0700
  • Tim Sager
    tagged this with Important
    posted 2013-04-22 14:19:30 -0700

Status key

  • Answered: The question has been officially answered
  • Incomplete: More information is needed to answer the question