the-calendar.net

Google Calendar

How to Embed a Google Calendar on a Website

Google Calendar provides an embeddable iframe for any calendar you've made public. You can pick the default view, color theme, and which UI controls to show.

Step-by-step

  1. Make the calendar public first. In Settings and sharing → Access permissions, tick Make available to public.
  2. Scroll to Integrate calendar. Copy the Embed code.
  3. Paste the <iframe> tag into the HTML of your page where you want it to appear.
  4. To customize the embed, click Customize next to the embed code — you can change colors, show/hide the navigation, set the default view (month, week, agenda), and combine multiple calendars in one embed.
  5. Save your page and reload — the calendar appears, scoped to the visibility you set.

Make the embed responsive

Wrap the iframe in a container with position: relative; padding-bottom: 75%; height: 0; and give the iframe position: absolute; width: 100%; height: 100%;. That keeps a 4:3 aspect ratio on every screen.

Embed multiple calendars in one widget

On the customize page, add more calendars in the Calendars to Display field. Each shows in its assigned color and viewers can toggle them individually.

Alternatives

If the default iframe is too plain, third-party widgets like FullCalendar, Add to Calendar Button, or commercial services can render the same iCal feed with more design control.

Related guides

Frequently asked questions

Can I embed a private calendar?
No. The embed requires the calendar to be either fully public or shared with the viewer's Google account (which still requires sign-in).
Is there a height limit?
Practically no — but very tall iframes (over 800px) are awkward on mobile. Use the agenda view for narrow screens.