When creating events, either in-person or virtual; it can be valuable to create dynamic ‘Add to calendar’ links that set up calendar invitations in Google Calendar for supporters who are RSVPing.
This document explains how to make some changes to your NationBuilder theme files that make it easy to add these dynamic links. By utilizing native NationBuilder Liquid features, it is possible to make these dynamic so they pull in information directly from the event fields including event name, date & time/timezone, event location, and URL.
Example of an ‘Add to Google Calendar’ link generated via a dynamic link.
Create your ‘Add to calendar’ links
Download and open this file.
If you’re using a stock theme, you must first convert to a custom theme.
Click on the ‘Files’ tab and drag the new file to add them.
4. Ensure files is published by clicking (see picture below)
This has now created two new dynamic ‘Liquid drops’ as follows:
{{ addToGoogleCalendarUrl }}: A dynamic URL for adding to Google Calendar that can be displayed or used as a hyperlink (i.e. https://calendar.google.com/calendar/u/0/r/eventedit?text=Maddys+Event&dates=20300622T180000/20300622T210000&details=https://dogchestersouthonmomentum-oliverjwells.nationbuilder.com/event%0A&location=Maddys+House,+London+SE14+6LA,+United+Kingdom&ctz=America/Bogota&sf=true&output=xml)
{{ addToGoogleCalendarButton }}: ‘Add to Google Calendar’ hyperlinked with the text above. When added to a website template this will appear in the primary button format.
Add your ‘Add to Calendar’ hyperlinks to Event pages
If you want to add the buttons to your event page itself, then you can click into the page template and add the liquid drops to the relevant section.You will need to include the code {% include "add_to_calendar" %} at some point before you include the liquid drops. If you would like to include it after the page event content, navigate to {{ page.event.content}} in the code and add the liquid drop after the if statement (see example below).
Example of where to put ‘Add to calendar’ Liquid drops in the page template.
Notes on using 'Add to Google Calendar' buttons
If you would like to include these across all event pages, you can add them to the global event page templates, by navigating to the relevant theme file via theme > files > pages_show_event_wide.html and making the update there.
If using the {{ Button }} drops, the formatting will only be supported in V2 themes (Action, Momentum, and Raise). We recommend testing out each time or checking out the style guide for each theme.
To add the Google Calendar button to the Verve theme, insert this code into your Event template:
<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&text={{ page.event.name | url_encode }}&dates={{ page.event.local_start_at | date: '%Y%m%dT%H%M%S' }}/{{ page.event.local_end_at | date: '%Y%m%dT%H%M%S' }}&location={{ page.event.venue_name | url_encode }}{% if page.event.has_venue_address? %}, {{ page.event.venue_address.one_line | url_encode }}{% endif %}&details={{ page.event.content | strip_html | url_encode }}" target="_blank" class="calendar-button google-button">Add to Google Calendar</a>Example on where to place the code in the Event template:
⚠️ Note on Daylight Savings Time: Note that the "Add To Calendar" feature is designed to dynamically adjust based on daylight savings time. So, if you select your timezone as ‘Eastern’, the timezone picked will be correct based on the location rather than its relativity to GMT.