How to add a Google Calendar

This support guide will walk you through how to add a Google Calendar to your Rocketspark website. Having a Google Calendar added to your website will allow you to easily show customers your upcoming events so that they can stay up to date. 

1. Go to your Google Calendar, click on the three dots next to your calendar name, and select Settings and sharing.
   
2. Click Access Permissions and tick Make available to public.
    
3. Click the Integrate calendar tab, then copy the text from the Embed code box.
   
   
4. You can also choose to Customize your calendar and change things such as the background colour, button settings, which calendars to display, and the start date. If you change these settings, you'll need to copy the embed code from the Customise page instead.
5. Log into your Rocketspark Dashboard and go to Editor. 
6. Add a stack where you want to place the calendar.
7. Click Add Block and add an Code block.
   
8. Paste the code into the HTML block.
   
9. Click Publish. Your calendar should appear on the page in the block you have created.

Making your Google Calendar responsive - Advanced Users Only

If you are wanting to make your Google Calendar responsive we have the code relevant to this outlined below.

We have broken it down into steps for you:

1. Firstly please contact the Customer Success team and request we add some custom code to the backend of your website to enable the Responsive Google Calendar.
2. Second, you will need to edit the Google Calendar embedded code.

This is an example of a Google Calendar embed code they provide:

<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

Add this iframe embed code inside a responsive-iframe-container div:

<div class="responsive-iframe-container big-container">
<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div>

b. Then, copy the iframe code. In the new iframe code that you have copied, add the following code at the end of the source (src):

&showPrint=0&showTabs=0&mode=AGENDA

<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland+&showPrint=0&showTabs=0&mode=AGENDA" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

Result:

<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland&showPrint=0&showTabs=0&mode=AGENDA" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

c. Add the new iframe code inside another div. It should look something like this:

<div class="responsive-iframe-container small-container">
<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland&showPrint=0&showTabs=0&mode=AGENDA" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div>

The end result should look like this:

<div class="responsive-iframe-container big-container">
<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div>

<div class="responsive-iframe-container small-container">
<iframe src="https://calendar.google.com/calendar/embed?src=admin%40anchoragepark.school.nz&ctz=Pacific%2FAuckland&showPrint=0&showTabs=0&mode=AGENDA" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div>

3. Finally, copy the final code into an HTML Block on the page where you want to insert the Google Calendar.

If you find you get stuck with the above please do contact our Customer Success Team.