How to Embed Google Calendar on Your Website Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Google Apps
How to Embed Google Calendar on Your Website
Add a professional-looking calendar to your site
By Marziah Karch Marziah Karch Writer Michigan State University Emporia State University Marziah Karch is a former writer for Lifewire who also excels at Serious Game Design and develops online help systems, manuals, and interactive training modules. lifewire's editorial guidelines Updated on February 18, 2022 Reviewed by Jon Fisher Reviewed by Jon Fisher Wichita Technical Institute Jonathan Fisher is a CompTIA certified technologist with more than 6 years' experience writing for publications like TechNorms and Help Desk Geek. lifewire's editorial guidelines Tweet Share Email Tweet Share Email Google Apps Docs Sheets Slides What to Know
On Google Calendar, select three dots next to a calendar > Settings and Sharing > copy Embed code.Copy the code for the default calendar settings or select Customize to change the settings.Copy the HTML code and paste into the HTML for your web page. This article explains how to select, customize, and embed a Google Calendar onto your website. Instructions apply to desktops on any browser.
How to Embed a Google Calendar on Your Website
Use the free Google Calendar to manage and share a public-facing calendar on your website. 01 of 05 Getting Started Settings
To embed a calendar, log in to Google Calendar. Next, go to the left panel and hover over the calendar you want to embed. Select the three dots that appear. In the expanded option box, select Settings and sharing. 02 of 05 Copy the Code or Select More Options
Scroll down to the Integrate Calendar section. Under Use this code to embed this calendar in a web page, copy the embed code. The default size is an 800 by 600 pixel calendar with Google's default color scheme. Select Customize to change settings. 03 of 05 Customizing the Look
After selecting Customize, specify the default background color to match your website, the time zone, the language, and the first day of the week. Set the calendar default to Week, Month, or Agenda view. Agenda view is useful for something like a cafeteria menu or team project schedule. You can also specify which elements show up on your calendar—like the title, print icon, or navigation buttons. The default size is 800 by 600 pixels. That size is fine for a full-size web page with nothing else on it; however, if you're adding your calendar to a blog or web page with other items, you'll need to adjust the size. Every time you make a change, the site displays a live preview. The HTML above your calendar changes as well. When you're satisfied with your changes, go to the top of the screen, and under Embed code, copy (Ctrl+C or Command+C) the HTML. 04 of 05 Paste Your HTML
Paste (Ctrl+V or Command+V)the code into the relevant section of the HTML for your webpage. 05 of 05 The Calendar Is Embedded
View your final page to display the live calendar. Any changes you make to events on your calendar update automatically. If it isn't quite the size or color you had in mind, go back to Google Calendar and adjust the settings, but you'll have to copy and paste the HTML code again. In this case, you're changing the way the calendar appears on your page, not the events. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit More from Lifewire A Full Review of Google Calendar and Its Features How to Sync Google Calendar With iPhone Calendar How to Share Your Google Calendar How to Ask Your Facebook Page Fans Questions How to Get Google Calendar on Your Windows Desktop How to Make a Calendar In Excel How to Share Your Google Calendar How to Schedule a Google Meet How to View the HTML Source in Google Chrome How to Insert Source Code Into a Word Document How to Customize an Embedded YouTube Video Viewing the HTML Source Code in Safari How to Embed Instagram Photos or Videos on a Website How to Automatically Add Birthdays to Google Calendar The 7 Best Shared Calendar Apps of 2022 7 Best Free Image Hosting Websites Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up Newsletter Sign Up By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookies Settings Accept All Cookies