Embed a Google Calendar

To embed a Google Calendar into a WordPress page using the Custom HTML block, follow these steps:

1. Access Your Google Calendar
   • Open Google Calendar in your web browser.
   • Ensure you have access to the Google Calendar that you want to embed on your WordPress site. You can create a new calendar or use an existing one.
2. Open Google Calendar Settings
   • In the left-hand navigation pane, click on the three vertical dots next to the calendar you want to embed and select “Settings and sharing.”
3. Verify Calendar Access Permissions
   • Within the “Calendar settings” and “Access permissions for events”, make sure “Make available to public” is checked. Or you will see a 404 error on the embedded calendar.
4. Copy the Calendar Embed Code
   • Also, within “Calendar settings” scroll down to the “Integrate calendar” section.
   • In the “Embed code” section, copy all of the html code text that begins with “
     • optional: you can also use the Customize option to change the look and feel of the embedded calendar before you copy the iframe code.
5. Log in to Your WordPress Dashboard
   Log in to your WordPress dashboard using your UW NetID credentials.
6. Add a Custom HTML Block to the WordPress page from the Block Picker
   • In the page editor, add a Custom HTML block. You can do this by clicking the “+” icon to add a new block and then searching for “Custom HTML”.
7. Paste the Embed Code
   • In the Custom HTML block, paste the html iframe code that was copied from Google Calendar. You can click on “preview” in the block toolbar to get a preview of the calendar. You can adjust the width and height attributes within the html code to fit your page layout if you didn’t do this already in the google customize tool.
     
     Reminder: the html code that you are copy+pasting should look similar to this:
     
     <iframe src=”YOUR_GOOGLE_CALENDAR_URL” style=”border: 0″ width=”800″ height=”600″ frameborder=”0″ scrolling=”no”></iframe>
8. Publish or Update the Page
   • Click the “Publish” or “Update” button to save your changes and make the Google Calendar visible on your WordPress page.
9. View Your Embedded Calendar
   • Visit the WordPress page on your WordPress site where you added the Custom HTML block to see your embedded Google Calendar.

Remember that Google Calendar embeds may not always be responsive to different screen sizes or placements within the editor if you have nested it within other layout blocks, so you may need to adjust the width and height values in the embed code to ensure it fits your webpage appropriately.