> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Google Calendar in Elementor

Step-by-step guide to embed Google Calendar in Elementor using the Custom iFrame WordPress plugin. Show schedules and bookings on your site. No coding required.


## Overview

Custom iFrame lets you embed Google Calendar in Elementor by pasting any calendar share link into the widget. Display your availability, event schedules, or appointment booking pages directly on your WordPress site.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Gutenberg WordPress instead? Follow the [Embed Google Calendar in Gutenberg WordPress](/gutenberg/google/embed-google-calendar) guide.

Want to embed Google Maps instead? See [Embed Google Map in Elementor](/elementor/google/embed-google-maps).

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Google Calendar URL to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/PNp22GUY3_s"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## Step 1: Get Your Google Calendar Link

<Steps>
  <Step title="Open Google Calendar" icon="calendar" title-type="p">
    Go to [calendar.google.com](https://calendar.google.com).
  </Step>
  <Step title="Create an appointment schedule" icon="plus" title-type="p">
    Click **Create** and select **Appointment schedule**. Set your appointment name, duration, availability, and scheduling window. Click **Save**.
  </Step>
  <Step title="Copy the booking page link" icon="link" title-type="p">
    Open the appointment schedule. Click **Open booking page**. Copy the URL from your browser.
  </Step>
</Steps>

<Callout kind="info">
  This guide covers embedding a Google Calendar appointment booking page. To embed a standard public calendar, go to **Settings > Settings for my calendars**, scroll to **Integrate calendar**, and copy the public URL.
</Callout>

## Step 2: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the calendar. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the Elementor editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Google Calendar in Elementor

<Steps>
  <Step title="Paste the calendar URL" icon="clipboard" title-type="p">
    In the Content tab, paste your Google Calendar URL into the **Source URL** field. The calendar appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776953035/elementor/google/google-calendar/paste-google-calendar-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Google Calendar URL in Source URL field with live appointment booking calendar preview"
      width="1875"
      height="870" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 600px to display the full calendar view. Enable **Auto Height** to let it resize with the content.
  </Step>
</Steps>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

<Callout kind="success">
  Click **Update** or **Publish**. Your Google Calendar is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Google Calendar in Elementor using the Custom iFrame plugin. From copying the calendar link to pasting the URL and publishing, the whole setup runs through the Elementor editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Can I embed a standard Google Calendar, not just an appointment page?" default-open="false">
    Yes. Go to **Settings > Settings for my calendars** in Google Calendar. Scroll to **Integrate calendar** and copy the public URL. Paste it into the Source URL field. The calendar must be set to public.
  </Expandable>
  <Expandable title="My calendar shows blank. What should I check?" default-open="false">
    Confirm the calendar or booking page is publicly accessible. Private calendars require a Google login and cannot be embedded. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="What height should I set for a Google Calendar?" default-open="false">
    Set height to at least 600px for a full calendar view. Appointment booking pages work well at 700px to 900px. Enable Auto Height to let the iFrame resize automatically.
  </Expandable>
  <Expandable title="Can visitors book appointments directly from the embedded calendar?" default-open="false">
    Yes. When you embed a Google Calendar appointment booking page, visitors can select a time slot and book directly on your WordPress page without leaving your site.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Google Calendar in Gutenberg WordPress" href="/gutenberg/google/embed-google-calendar" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed Google Map in Elementor" href="/elementor/google/embed-google-maps" icon="map-pin" horizontal={false}>
    Embed Google Maps locations in Elementor.
  </Card>
</Columns>

## Related Guides

- [Embed Google Services in Elementor - Overview](/elementor/embed-google-services)
- [Embed Google Map in Elementor](/elementor/google/embed-google-maps)
- [Embed Google My Maps in Elementor](/elementor/google/embed-google-my-maps)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)