Jump to the main content block

Q:How to Embed Google Calendar into a Webpage

publish date : 2025-04-01 update date : 2025-04-02

Q:How to Embed Google Calendar into a Webpage


A:

Create an event in Google Calendar.

Select "More options."

Click "Settings and sharing."

Check the option to make the calendar public.

Copy the embed code URL and paste it into the responsive embed code below. Save the changes.

 

<div class="calendar-container">

    <iframe

        src="https://calendar.google.com/calendar/embed...Asia%2FTaipei...嵌入的網址語法"

        style="border:0;"

        allowfullscreen

        loading="lazy">

    </iframe>

</div>

 

<style>

.calendar-container {

    position: relative;

    width: 100%;

    padding-top: 75%; /* 4:3 Aspect Ratio */

}

 

.calendar-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

</style>

Organizer: Library
Click Num: