Embed Google Calendar in Gutenberg
Step-by-step guide to embed Google Calendar in Gutenberg using the Custom iFrame WordPress plugin. No coding required.
Overview
Custom iFrame lets you embed Google Calendar in Gutenberg by pasting a booking page link into the block. Display your booking page directly on your WordPress site so visitors can schedule time with you without leaving your page.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
Using Elementor instead? Follow the Embed Google Calendar in Elementor guide.
Requirements
- Custom iFrame plugin installed and active
- WordPress with the Gutenberg block editor
- A Google Calendar booking page link to embed
Step 1: Get the Google Calendar Booking Page Link
Open Google Calendar
Go to calendar.google.com and open your calendar.
Create or open a booking page
Create a new booking page or open an existing one from your calendar settings.
Copy the booking page link
Copy the link for the booking page. This is the URL you will paste into the Custom iFrame block.
Step 2: Install the Plugin and Add the Block
Install and activate the plugin
Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.
Open your page in the block editor
Go to the page or post where you want the calendar. Click Edit to open the Gutenberg block editor.
Add the Custom iFrame block
Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.
Step 3: Embed Google Calendar in Gutenberg
Paste the Google Calendar URL
Select the Custom iFrame block. In the Source field in the right panel, paste the Google Calendar booking page link you copied. Your booking page appears inside the block in the editor immediately.
Step 4: Adjust Settings and Publish
Height: Set the iframe height to match your booking page and page layout. 600px to 800px works well for most booking pages.
Scroll Bar: Enable the scrollbar if the calendar extends below the iframe height.
Refresh Interval: Set how often the iframe refreshes. Useful if calendar availability updates frequently.
Smart Load: Turn on lazy loading so the iframe loads only when it enters the viewport.
Click Update or Publish. Your Google Calendar booking page is now live on your WordPress site.
For a full walkthrough of every Custom iFrame block setting in Gutenberg, see the Set Up Custom iFrame in Gutenberg guide.
This guide showed you how to embed Google Calendar in Gutenberg using the Custom iFrame plugin. From copying the booking page link to configuring the block and publishing, the setup takes only a few minutes.
FAQ
Yes. The booking page is fully functional inside the iframe. Visitors can view availability and book time slots directly on your WordPress page.
Yes. Get the embed link from your Google Calendar settings under Settings > Calendar settings > Integrate calendar. Copy the embed URL and paste it into the Source field.
Make sure the booking page is published and the link is correct. If the calendar is set to private, visitors cannot view it. See iFrame Not Showing for more help.
Booking pages typically need 600px to 800px. Enable Auto Height to let the iframe resize automatically based on the content.
Also Available For
Embed Google Calendar in Elementor
Guide for the Elementor widget.
Embed Google Maps in Gutenberg
Embed Google Maps in the block editor.
Related Guides
Last updated today
Built with Documentation.AI