Looking for a quick way to add an events calendar to your website? Having a calendar boosts community engagement and lets visitors quickly check when an upcoming event is happening.
You can easily integrate Google Calendar into your website by placing an embed code into a custom HTML section on your Website.com site builder account.
This is great if you have a website for a school or daycare and want to list out important dates or field trips, a church wanting to display your service schedule and special events, or a realtor or development company with plenty of upcoming open houses.
Here are the steps to integrate Google Calendar into your website:
1)Log into your Google account and go to calendar.google.com
2)Click on the Settings icon and then click “Settings” on the top right.
3)On the left, under the title “Settings for my calendars” you will see your calendars. Click on the one you want to add to your website.
4)Click “Access permissions for events” and select “Make available to public.”
5)Click “Integrate Calendar” and find the embed code. Copy the embed code and paste it into a word editor to make the following tweaks:
-Look for where it says: width=”800” height=”600” and change it to: width=”100%” height=”100%”
Now copy that code and head over to your website builder account.
In the website builder:
1)Add a Custom HTML section.
2)Paste the embed code into the code section.
3)Do not toggle on the option to have the code load inline.
4)Choose the code type for your site based on the function it has for your website (we chose Essential).
5)Click Save.
6)On the left, set the Custom Code Height to 600 for desktop, tablet and mobile.
7)Click Publish in top right to make the changes go live!
Want to watch a video tutorial?
Hi everyone! Here’s a quick video to show you how to add a Google Calendar to your website to showcase your events or upcoming schedule.
This is great if you have a website for a school or daycare and want to list out important dates or field trips, or a church wanting to display your service schedule and special events, or you’re a realtor or development company with plenty of upcoming open houses.
Having a calendar boosts community engagement and lets visitors quickly check when an upcoming event is happening.
So before we start, make sure you already have a Google account for your business, and you have a google calendar you want to put on your website.
I’ve logged into my Google account for my cupcake business, and I’m logged into calendar.google.com
Now to grab the embed code to put one of the calendars on my website, just click on the settings icon up here. Now you’ll see your calendars on the left, under the title “Settings for my calendars.”
Just click on the calendar you want to put on your website, so I’ll click on Auntie Baker.
Now these options will appear, and first we want to make the calendar Public so it can be shared.
So click “Access permissions for events.”
Then click “Make available to public.” This will allow anyone to see the events, but you’ll notice that based on different sharing options, you can choose different sharing settings.
But for my website’s purposes, all I need is to “Make it available to the public.”
Now I’ll click “Integrate Calendar.”
Now look for the embed code, here here it is, just copy it.
Now I want to make some tweaks to the code so that it will look best on my website.
So I’ll paste it first in a Google Docs file. You can also just paste it into notebook or word, just something to edit on.
Now find where it says width and change the number here to 100%. We’ll do the same for the height, just replace the number with 100%.
Now we’re ready to put this code onto our website!
So I’m logged into my Website.com site builder account. I’m going to create a page and call it Events.
Just just click Manage Pages, add new page, and we’ll add a blank page.
Now we’ll click to add section.
We’ll choose Custom HTML.
I’ll choose the first layout.
Now on the left you can click to edit under custom code, or just double click right on the builder.
Let’s copy the tweaked embed code that I have on the doc, and then paste it here.
We’ll keep it so that the code does not load inline.
Under code type, choose the category for how your code will affect your site. I will choose “Essential” because I want to make sure that the calendar loads for everyone and is a key aspect of my website.
Now click Save.
A few more tweaks in the editor, I’ll set the custom code height to 600 for all devices.
Now I’ll give this section a title.
Once this is done, we’re ready to hit publish and make this go live!
Now let’s look at the live site.
Visitors can now see my upcoming events for my bakery by going to my events page.
So we hope that was helpful! Make your website with Website.com, the link is in the description, and thanks for watching!