{"id":14447,"date":"2022-02-17T21:13:04","date_gmt":"2022-02-17T21:13:04","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2022\/02\/17\/how-to-embed-google-calendar-on-a-website-or-blog\/"},"modified":"2022-02-17T21:13:04","modified_gmt":"2022-02-17T21:13:04","slug":"how-to-embed-google-calendar-on-a-website-or-blog","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2022\/02\/17\/how-to-embed-google-calendar-on-a-website-or-blog\/","title":{"rendered":"How to Embed Google Calendar on a Website or Blog"},"content":{"rendered":"

<\/a>\n<\/p>\n

\n

\"\"<\/p>\n

You might have a website for your venue, charitable organization, local sports team<\/a>, or something similar where you\u2019d\u00a0share an event schedule<\/a>. List those events in Google Calendar, and you can easily get the code to embed the calendar for all to see.<\/p>\n

RELATED:<\/strong> How to Share a Static Snapshot of your Google Calendar<\/em><\/strong><\/a><\/p>\n

Get the Google Calendar Embed Code<\/h2>\n

Head to Google Calendar<\/a> in your browser, sign in, and click the gear icon on the top right to open the Settings Menu. Select \u201cSettings.\u201d<\/p>\n

\"\"<\/p>\n

On the Settings screen, choose a calendar on the left below Settings For My Calendars, if you have more than one. Then pick \u201cIntegrate Calendar\u201d or scroll to that section on the right.<\/p>\n

\"Select<\/p>\n

You\u2019ll see a block of code in the Embed Code area. You can simply select and copy this code to insert your Google Calendar with default settings.<\/p>\n

If you want to make changes to the appearance, calendars displayed, color, or size, click \u201cCustomize\u201d to change the code.<\/p>\n

\"Customize<\/p>\n

Customize the Code<\/h2>\n

After you click the Customize button for the Embed Code, your browser opens a new tab. Here, you\u2019ll see that same embed code at the top with a preview of your calendar beneath.<\/p>\n

RELATED:<\/strong> How to Create and Customize a New Google Calendar<\/em><\/strong><\/a><\/p>\n

On the left, are your customization options<\/a>. This lets you set the exact appearance and size of the calendar you want.<\/p>\n

\"Embed<\/p>\n

Calendar Title<\/strong>: Starting on the top left, you can enter a Calendar Title. This replaces the default name of your calendar.<\/p>\n

\"Calendar<\/p>\n

Show<\/strong>: Next, you\u2019ll see several options below Show. By default, all items are checked, but you can uncheck those you don\u2019t want to display on the calendar. This includes things like the Title, Navigation Buttons, Print<\/a>\u00a0Icon, and Date.<\/p>\n

\"Items<\/p>\n

Size<\/strong>: If you have a specific size you want to embed on your site, you can adjust that for the calendar. Enter the Width and Height or use the arrows to increase or decrease those sizes in pixels.<\/p>\n

\"Size<\/p>\n

Background Color<\/strong>: If you want to add pizzazz to your calendar, you can choose a background color for the top section.<\/p>\n

Border<\/strong>: Check the box for Border if you want to include one around the calendar.<\/p>\n

\"Background<\/p>\n

Calendar Settings<\/strong>: You\u2019ll then see calendar settings for the Default View (week, month, agenda), Week Starts On, Language, and Timezone<\/a>. Use the drop-down box beneath any of these settings to change how your calendar appears.<\/p>\n

\"Calendar<\/p>\n

Calendars to Display<\/strong>: Last, you can choose more than one calendar to display if you like. If this is for a family site, you may want to include Family and Birthdays<\/a>, for example.<\/p>\n

\"Available<\/p>\n

With each adjustment you make to the above items, the Embed Code at the top changes to accommodate those changes. Give it a few seconds to update with each change.<\/p>\n

When you\u2019re happy with the appearance and settings for your calendar, click the Copy icon on the right side of the Embed Code box. This places the code on your clipboard<\/a> for you to paste where needed.<\/p>\n

\"\"<\/p>\n

Keep in mind that the process for pasting or entering this code on your site or blog depends on the service or application you use. Refer to your service\u2019s documentation for help in the embed process.<\/p>\n

For more, take a look at how to share Google Calendar with specific people<\/a>.<\/p>\n<\/div>\n