How to Embed Google Calendar on Your Website and Notion

Embedding your Google Calendar is a pretty simple move that can completely change your workflow. All it takes is making your calendar public, grabbing a bit of code from the settings, and dropping it into your website or workspace. Suddenly, your calendar isn't just a separate app—it's a live, integrated part of your digital home base.

Why an Embedded Calendar Is a Productivity Powerhouse

Let's be real—flicking between browser tabs to check your schedule while managing projects is a recipe for chaos. For freelancers, small teams, and anyone juggling multiple moving parts, this constant context-switching leads to missed meetings and poor coordination. The fix is much easier than you'd think: just embed your Google Calendar right where you work.

This small tweak turns your calendar from a forgotten tab into a central hub. You get fewer scheduling mistakes, smoother team alignment, and a polished, public calendar for clients to check your availability or see upcoming events.

A Unified Command Center

If you're a Notion user, this is a game-changer. Instead of bouncing between your project dashboard and your schedule, you can drop a live calendar right next to your task lists and client notes. This creates a single command center where you can see deadlines and meetings without ever leaving your workflow.

This isn't just a neat trick; it's a strategy that businesses are catching onto. In fact, over 558,653 live websites are already using Google Calendar embeds. That number represents a massive 40% growth in adoption, which tells you just how many people are centralizing their schedules to work smarter.

By integrating your calendar, you create a single source of truth for your schedule. This cuts down on miscommunication and gives your team or clients real-time info, finally putting an end to the endless "Are you free on Tuesday?" emails.

While Google Calendar is a fantastic all-rounder, some businesses have very specific needs. A tutoring center, for example, might get more mileage out of specialized tutoring scheduling software. For most of us, though, embedding is the perfect first step. And when you pair it with tools that let you send and schedule emails from Notion, you're well on your way to a truly streamlined setup.

Set Up Your Google Calendar for Public Sharing

Before we grab the embed code, we first need to tell Google Calendar what it's allowed to show the world. This is where most people get tripped up. If you've ever embedded a calendar only to see a blank box, it was almost certainly a permissions issue.

It’s an easy fix, but you have to do it from a desktop computer. Head over to your Google Calendar. On the left sidebar under "My calendars," find the one you want to share. Hover over its name, click the three-dot menu, and choose Settings and sharing.

This screen is mission control for your calendar's visibility.

Choosing Your Access Permissions

Now, scroll down a bit until you find the "Access permissions for events" area. You’re looking for a checkbox that says Make available to public. This is the magic button that makes your calendar embeddable on a public website.

Once you check that box, you get a crucial choice on how much to show:

See only free/busy (hide details): This is perfect if you're a consultant or freelancer. It lets potential clients see when you're available without them seeing why you're busy.
See all event details: Pick this for things like a team's public event schedule, a yoga studio's class list, or a community project timeline where everyone needs to see the specifics.

Getting this setting right from the get-go will save you a ton of headaches. For project managers and freelancers, just having a properly shared calendar can slash scheduling mix-ups by up to 30%. You can actually see the growing adoption of calendar integrations across the web.

Privacy Tip: Be ruthless about what you make public. Never, ever set a calendar with sensitive personal or business details to public. If you're building an internal dashboard for your team, don't use the public setting at all. Instead, use the "Share with specific people or groups" option and add your team members' Google accounts directly. Your data stays private, but your team gets the shared view they need.

Alright, with your calendar’s sharing settings sorted, we can get to the fun part—making it look good. This is where you go from a generic calendar to something that feels like a natural part of your site.

Head back to your calendar's Settings and sharing page. On the left, you'll find a menu item called Integrate calendar. This is your destination. You'll see a few code options, but the one we need is the Embed code. Look for the blue Customize button right below it and give it a click. This will pop open Google's interactive tool for styling your embedded calendar.

Dialing In Your Calendar's Appearance

This customization screen is basically a live preview editor. As you tweak the settings, you can see exactly how the calendar will look on your site, which takes all the guesswork out of the process. The whole point is to make it blend in seamlessly.

One of the first big decisions is the Default view. You can pick from Month, Week, or Agenda.

The Agenda view is my personal go-to for "upcoming events" sections. It creates a clean, vertical list that’s super easy for visitors to scan.
The Month view, on the other hand, is perfect for showing the big picture, like a team’s project schedule or a public-facing content calendar.

You’ll also see a bunch of checkboxes for hiding different elements. For a really clean, minimalist design, you can uncheck the title, navigation buttons, tabs, and even the print icon. It's all about removing distractions and making it look integrated.

Pro-Tip: Don't overlook the "Week starts on" dropdown. While Sunday is the default in many places, a business or project calendar almost always feels more natural starting on Monday. It's a tiny tweak that really improves the user experience for a professional audience.

To help you decide what to show and hide, this table breaks down the most important settings and when you might use them.

Google Calendar Customization Options Explained

Customization Setting	What It Does	Best Used For
Title	Displays the name you gave your calendar at the very top.	Public-facing schedules where context is key, like "Company Holiday Schedule" or "Community Events."
Navigation Buttons	Adds arrows that let users click forward and backward through months, weeks, or days.	Interactive calendars where you want users to explore future or past dates.
Default View	Sets the initial display format (Month, Week, Agenda) when the page loads.	Month view for big-picture planning; Agenda view for scannable, list-style event feeds.
Background Color	Lets you change the calendar's background with a hex code (e.g., #FFFFFF for white).	Matching your website’s brand colors for a completely seamless and professional look.

These settings give you a surprising amount of control over the final look and feel.

Once you’ve got it looking just right, grab the iframe code from the box at the top of the page. Just copy that entire snippet—it has all your customizations baked in. We'll use this exact code in the next step to get it live on your site.

Alright, you've got your customized iframe code. Now for the fun part: putting it where it can actually do some good. This is the moment your calendar goes from a private planning tool to a public, interactive feature on your site or in your workspace.

The process is pretty straightforward, whether you're adding it to a website or dropping it into Notion.

Think of it like this: you generate the code, tweak the settings, and then paste it into its final home. The real magic happens in that last step.

Adding the Calendar to Your Website

If you're running a site on a platform like WordPress, Squarespace, or Webflow, this will feel very familiar. You're just looking for a spot to add a chunk of custom HTML.

On a WordPress page, you'll want to use the "Custom HTML" block.
In Squarespace, look for the "Code Block."
For Webflow users, it's the "Embed" element.

Once you’ve added the right element to your page, simply paste in the full iframe code you grabbed from Google Calendar. You don't need to understand what the code does—just paste it, save, and you'll see your calendar pop up.

Embedding dynamic content like this is a common practice. These types of functional elements are often called website widgets, and they're a great way to add features without complex development.

Embedding in a Notion Workspace

For those of us living in Notion, embedding a calendar is a game-changer. It lets you build a true command center where your team’s schedule sits right alongside project boards and client notes.

Just go to your Notion page, type /embed, and hit Enter. An embed block will appear.

Now, paste either the public URL or the full iframe code from your Google Calendar settings into the field and click Embed link. Notion will render the calendar right on your page, and you can drag the edges to resize it perfectly.

This kind of integration is only getting better. With cloud APIs projected to drive 75% of the market by 2026, connecting our favorite tools will become second nature. We're already seeing platforms that can use embeds to pull meeting details automatically, leading to 50% faster data entry. If you use Notion often, you might also find our guide on how to send emails directly to your Notion databases useful.

Advanced Customization for a Responsive Calendar

Getting a basic Google Calendar onto your site is a great start, but making it look polished and professional is what really elevates the user experience. The single biggest headache I see people run into is responsiveness.

A standard iframe embed often has a fixed width. It might look fine on your desktop, but on a mobile phone, it can break your layout, forcing users to scroll horizontally. It just looks clunky and unprofessional.

Thankfully, the fix is surprisingly simple with a little bit of CSS. By wrapping your iframe in a container element and adding a few styling rules, you can make the calendar automatically adapt to any screen size.

Make Your Calendar Responsive

First, you'll need to wrap the iframe code Google gave you in a <div> element. Give that div a class name you'll remember, something like responsive-calendar-container.

Next, pop open your website's stylesheet and add this CSS snippet:

.responsive-calendar-container { position: relative; overflow: hidden; padding-top: 75%; /* Adjust this percentage to change aspect ratio */ }

.responsive-calendar-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } This little bit of code works wonders. It creates a flexible container that preserves the calendar's aspect ratio while scaling it perfectly to fit the width of the screen. It’s a true set-it-and-forget-it solution for mobile-friendliness.

Beyond just making it responsive, you can also fine-tune the calendar’s look and feel by tweaking the URL inside the iframe code itself. Google lets you add special "URL parameters" to override the default settings.

By adding a few parameters to the URL in your embed code, you can change the calendar's background color, set the language, or even specify the time zone. For example, adding &bgcolor=%23f5f5f5 will change the background to a light gray.

These small adjustments can make a huge difference in how well your embedded calendar blends with your website's design.

For developers who need to go even further, you can build much more powerful integrations. Tools that allow for programmatic connections, like the ones detailed in the NotionSender API documentation, open up a whole world of automation for calendar-based workflows. Just be mindful of performance—a calendar loaded with complex features can sometimes slow down your page.

Troubleshooting Your Embedded Google Calendar

Even when you follow all the steps, you can sometimes hit a snag. It happens. Let's walk through a couple of the most common issues people run into when embedding their Google Calendar.

My Embedded Calendar Is Blank or Shows an Error

Nine times out of ten, this is a simple permissions problem. If your embedded calendar is just a blank box or throwing an error, your first stop should be back in Google Calendar.

Head to your calendar's Settings and sharing menu. You absolutely have to make sure the Make available to public option is checked. If that box isn't ticked, the calendar is private. That means only people you’ve directly invited (who are also logged into their Google account) will be able to see anything. For a public website, that's a non-starter.

Can I Show Multiple Calendars in One Embed?

Yes, and this is one of my favorite features because it’s so straightforward. When you're on the Customize screen in Google Calendar—the one where you grab the iframe code—just look to the left.

You'll see a list of all your available calendars. Simply check the boxes next to every calendar you want to include. Google automatically pulls them all together into a single, color-coded view right in the embed. It’s perfect for creating a master schedule from several different sources.

A quick word on security: making a calendar public means just that—public. Anyone with the link can see every event detail. This is fine for a public events schedule but a huge privacy risk if the calendar has any personal or sensitive information. Never, ever make a private calendar public.

For things like internal team schedules or project timelines, the best practice is to keep the calendar private and share it directly with your team's specific Google accounts.

Ready to manage your business communications more effectively? NotionSender allows you to send, receive, and automate emails directly from your Notion workspace, creating a true all-in-one command center. Learn more at https://www.notionsender.com.