Back to Blog

Google Calendar Embed Code: Complete Guide for Websites

7 min read

Getting the Google Calendar embed code for your website is simpler than you might think. Whether you're running a business website, managing client appointments, or sharing event schedules, embedding your calendar directly on your site keeps visitors informed without forcing them to navigate away.

If you're juggling multiple client calendars as a freelancer, consider using a unified calendar solution to sync all your Google Calendars into one view before embedding — it makes managing multiple schedules much cleaner for both you and your website visitors.

How to Get Your Google Calendar Embed Code

Retrieving your embed code takes just a few clicks through Google Calendar's settings. Here's the exact process:

  1. Open Google Calendar in your web browser
  2. Click the gear icon (Settings) in the top right corner
  3. Select "Settings" from the dropdown menu
  4. In the left sidebar, click on the calendar you want to embed
  5. Scroll down to the "Integrate calendar" section
  6. Copy the code from the "Embed code" field

The default embed code looks something like this:

<iframe src="https://calendar.google.com/calendar/embed?src=your-email%40gmail.com&ctz=America%2FNew_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Before copying this code, make sure your calendar visibility is set to "Public" if you want others to see it. You'll find this option in the "Access permissions" section of the same settings page.

Customizing Your Google Calendar Embed Code

The basic embed code works fine, but you'll probably want to customize it to match your website's design and show only relevant information.

Adjusting Size and Display

The most common customizations involve changing the calendar's dimensions and appearance:

Width and Height: Modify the width and height attributes in the iframe tag. Common combinations include:

  • 800x600 for desktop-focused sites
  • 100% width with 500-700px height for responsive designs
  • 600x400 for sidebar widgets

View Mode: Add parameters to the URL to control the default view:

  • `&mode=WEEK` for week view
  • `&mode=MONTH` for month view (default)
  • `&mode=AGENDA` for agenda view

Advanced Customization Options

You can add several URL parameters to fine-tune how your calendar appears:

  • `&showTitle=0` — Hides the calendar title
  • `&showNav=0` — Removes navigation buttons
  • `&showDate=0` — Hides the current date display
  • `&showTabs=0` — Removes view tabs (Month, Week, etc.)
  • `&showCalendars=0` — Hides the calendar list sidebar
  • `&bgcolor=%23ffffff` — Changes background color (URL encoded hex)

Here's an example of a heavily customized embed code:

<iframe src="https://calendar.google.com/calendar/embed?src=your-email%40gmail.com&ctz=America%2FNew_York&mode=WEEK&showTitle=0&showNav=1&showDate=1&showTabs=0&showCalendars=0&bgcolor=%23ffffff" style="border: 0" width="100%" height="500" frameborder="0" scrolling="no"></iframe>

Privacy and Sharing Settings for Embedded Calendars

Before embedding your calendar, you need to understand Google Calendar's privacy implications. Your embed code will only work if your calendar has the right sharing permissions.

Setting Up Public Access

For the embed code to work for website visitors, your calendar must be publicly accessible:

  1. Go to your calendar settings
  2. Find "Access permissions" section
  3. Check "Make available to public"
  4. Choose "See all event details" from the dropdown

This makes your calendar visible to anyone with the link — including search engines. If you have sensitive appointments, consider creating a separate public calendar for events you want to share.

Alternative: Specific People Only

If you don't want your calendar completely public, you can share it with specific people:

  1. In calendar settings, go to "Share with specific people"
  2. Add email addresses of people who should see the calendar
  3. Set their permission level (usually "See all event details")

This approach works well for client portals or team websites where you control access, but the embed won't work for general website visitors.

For freelancers managing multiple client accounts, keeping all your calendars synchronized becomes crucial when you're embedding calendars across different client websites or portals.

Implementing the Embed Code on Your Website

Once you have your customized embed code, adding it to your website depends on your platform.

WordPress Implementation

For WordPress sites:

  1. Edit the page or post where you want the calendar
  2. Switch to the "Text" or "Code" editor (not Visual)
  3. Paste your iframe code directly into the content
  4. Preview to ensure it displays correctly

Some WordPress themes or security plugins block iframes. If your calendar doesn't show up, try adding this to your theme's functions.php:

function allow_calendar_iframes($args) {
$args['iframe'] = array(
'src' => array(),
'width' => array(),
'height' => array(),
'frameborder' => array(),
'scrolling' => array(),
'style' => array()
);
return $args;
}
add_filter('wp_kses_allowed_html', 'allow_calendar_iframes');

HTML/Static Sites

For static HTML sites, simply paste the iframe code where you want the calendar to appear:

<div class="calendar-container">
<h2>Our Schedule</h2>
<iframe src="https://calendar.google.com/calendar/embed?src=your-email%40gmail.com"
style="border: 0"
width="800"
height="600"
frameborder="0"
scrolling="no">
</iframe>
</div>

Making It Responsive

To make your embedded calendar mobile-friendly, wrap it in a responsive container:

.calendar-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}

.calendar-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Troubleshooting Common Embed Code Issues

Even with the correct code, you might run into problems. Here are the most common issues and their solutions:

Calendar Not Displaying

Problem: The iframe appears empty or shows an error.
Solution: Check your calendar's privacy settings. It must be set to "Public" or shared with specific viewers.

Events Not Showing

Problem: Calendar loads but events don't appear.
Solution: Verify that individual events aren't set to "Private." Even in a public calendar, private events won't display to others.

Mobile Display Issues

Problem: Calendar looks broken on mobile devices.
Solution: Implement responsive CSS (shown above) or set a maximum width with mobile-friendly dimensions.

Loading Slowly

Problem: Calendar takes too long to load.
Solution: Consider using a simplified view (agenda mode) or limiting the number of visible calendars if you're displaying multiple ones.

If you're managing multiple Google Calendars for different clients or projects, the complexity of embedding multiple calendars can become overwhelming. In these cases, having all your calendars synced into a unified view first makes the embedding process much cleaner and gives your website visitors a better experience.

Beyond Basic Embedding: Advanced Calendar Integration

While Google's embed code works well for basic needs, you might want more control over how your calendar appears and functions on your site.

Using Google Calendar API

For developers, the Google Calendar API offers complete customization:

  • Style the calendar to match your site perfectly
  • Add custom functionality like event filtering
  • Integrate with other website features
  • Control exactly which events appear

The API requires programming knowledge but provides unlimited flexibility compared to embed codes.

Third-Party Calendar Widgets

Several services offer enhanced calendar widgets that connect to Google Calendar:

  • More styling options
  • Better mobile responsiveness
  • Advanced filtering capabilities
  • Custom event layouts

These typically require monthly subscriptions but can be worth it for professional websites that need specific functionality.

Maintaining Your Embedded Calendar

Once your calendar is embedded, regular maintenance ensures it continues working properly:

Check Privacy Settings: Google occasionally updates privacy policies. Verify your sharing settings remain correct.

Monitor Loading Speed: Embedded calendars can slow down page load times. Test your site speed regularly and optimize if needed.

Update Customizations: As your website evolves, you might need to adjust calendar dimensions or styling to maintain visual consistency.

Test Across Devices: Regularly check how your embedded calendar appears on different screen sizes and browsers.

Similar to how you share Google Calendar with different permission levels, embedded calendars require ongoing attention to privacy and access settings.

Making the Most of Your Embedded Calendar

Embedding your Google Calendar directly on your website creates a seamless experience for visitors while keeping your schedule management centralized. Whether you're sharing business hours, event schedules, or appointment availability, the embed code gives you a professional way to display calendar information without requiring visitors to leave your site.

Remember to regularly review your privacy settings, test the display across different devices, and keep your embedded calendar updated with current information. For freelancers juggling multiple client calendars, consider consolidating your views before embedding to present a cleaner, more professional appearance to your website visitors.

Ready to streamline your calendar management? Start by getting your Google Calendar embed code today, and watch how it transforms the way visitors interact with your scheduling information.