Add Google Calendars to Your Google Sites
TL;DR:
- Copy the embed code from your Google Calendar settings
- Paste it into Google Sites using the Embed option
- Customize the calendar's appearance to match your site
- Set permissions to make it view-only for visitors
- Preview and adjust placement as needed
Adding a Google Calendar to your Google Sites page keeps visitors informed about your schedule without sending them elsewhere. The process is straightforward and the calendar updates automatically when you make changes.
Getting Your Calendar Ready
Open Google Calendar and find the calendar you want to share. Click the three dots next to its name and select "Settings and sharing."
In the settings, look for the "Access permissions" section. If you want everyone to see your calendar, tick "Make available to public." For private sharing, leave this unchecked and share with specific people instead.
Grabbing the Embed Code
Scroll down to the "Integrate calendar" section. You'll see a box with HTML code that starts with <iframe>. This is your embed code.
Before copying it, click "Customize" to adjust how the calendar looks. You can change the size, hide weekends, or show only the agenda view instead of the full month grid.
Once you're happy with the settings, copy the entire HTML code.
Adding It to Your Site
In your Google Sites editor, go to the page where you want the calendar. Click the "+" button to add content and choose "Embed" from the menu.
Paste your HTML code into the text box and click "Next." The calendar will appear on your page immediately.
You can resize the calendar by dragging the corners or move it around like any other element on your site.
Making It Look Right
The calendar might not fit perfectly straight away. Use the resize handles to make it larger or smaller. If it looks cramped, try switching to agenda view in the calendar settings, which works better in narrow spaces.
The calendar will inherit some styling from your site automatically, but you can go back to the Google Calendar settings to adjust colors and fonts if needed.
Keeping It Updated
Your embedded calendar updates automatically when you add, change, or delete events in Google Calendar. Visitors will always see the current version without you having to update the site.
If you need to change the calendar settings later, you'll need to get a new embed code and replace the old one in Google Sites.
FAQs
Can visitors add events to my calendar?
No, embedded calendars are view-only by default. Visitors can see your events but can't edit or add anything.
What if my calendar isn't showing up?
Check that you've made the calendar public or shared it with the right people. Private calendars won't display for visitors who don't have access.
Can I show multiple calendars on one page?
Yes, you can embed several calendars by adding multiple embed elements to your page. Each calendar needs its own embed code.
Does the calendar work on mobile?
Yes, embedded Google Calendars are responsive and will adjust to fit mobile screens automatically.
Jargon Buster
Embed code – HTML code that lets you display content from one website inside another website
iframe – A HTML element that creates a window to display external content within your page
Public calendar – A calendar that anyone can view without needing special permissions
Agenda view – A list format showing upcoming events instead of a monthly grid
Wrap-up
Embedding a Google Calendar in your Google Sites page is one of the quickest ways to share your schedule with visitors. The calendar stays current without any extra work from you, and the customization options help it fit your site's design.
The key is getting the permissions right before you embed it. Once that's sorted, the technical side is just copying and pasting.
Ready to build a site that works harder for your business? Join Pixelhaze Academy for step-by-step guidance on Google Sites and more.