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