If you run a business, manage a community organization, or organize public events, managing schedules via email threads can become chaotic. Instead of manually answering questions about when the next meeting occurs, you can make a specific Google Calendar public and embed it directly into your own website. This allows your visitors to see a live, constantly updating view of your schedule, complete with a button to easily add your events to their own personal calendars.
How to Make the Calendar Public
Before you can embed a calendar on a website, you must ensure its privacy settings are configured to allow the general public to view it. Warning: Ensure you are sharing a dedicated public calendar (like “Yoga Studio Classes”), not your personal default calendar containing private appointments.
- Open Google Calendar in your desktop web browser.
- Look at the left-hand sidebar under the “My calendars” section.
- Hover your mouse pointer over the specific calendar you want to share.
- Click the Options icon (three vertical dots) that appears next to the calendar name.
- Click on Settings and sharing.
- Scroll down to the “Access permissions for events” section.
- Check the box next to Make available to public.
- A warning dialog will appear confirming that anyone on the internet will be able to see the events. Click OK to confirm.
How to Get the Embed Code
Once the calendar is publicly visible, you can generate the HTML code required to display it on a website.
- While still on the Settings page for that specific calendar, scroll down to the “Integrate calendar” section.
- Locate the text box labeled Embed code. It will contain a long string of HTML beginning with
<iframe>. - You can copy this code immediately, but it will use Google’s default visual styling. For a better result, click the Customize button located directly below the code box.
Clicking “Customize” opens a preview window where you can drastically alter the calendar’s appearance. You can change the background color to match your website’s branding, hide the title, adjust the default view (showing a monthly grid vs. a weekly agenda), and define the exact pixel width and height of the widget.
- Once you are satisfied with the preview, look at the top of the customization window and click the Copy icon to copy the newly updated HTML code to your clipboard.
How to Add the Calendar to Your Website
The final step depends entirely on what platform you use to host your website (e.g., WordPress, Squarespace, Wix, or raw HTML).
- For WordPress: Open your page editor, add a “Custom HTML” block, and paste the code directly into the block.
- For Website Builders (Wix/Squarespace): Look for an “Embed,” “HTML,” or “Widget” component in your builder’s toolbar, drag it onto the page, and paste the code into the settings box.
Once you save and publish the page, the Google Calendar will appear. From now on, any time you add or delete an event inside your Google Calendar app, the embedded calendar on your website will automatically update in real-time without requiring any further website edits.