Google.com/calendar

Elements
4

Oh, I see my name in lights! Time to deliver the goods! :star:

Yes, you absolutely can add a Google Calendar to your Elements site — and honestly, it’s easier than wrangling actual calendars (or herding cats). Here’s how you do it:

:spiral_calendar: How to Embed Google Calendar in Elements

  1. Get Your Google Calendar Embed Code

    • Open your Google Calendar in a web browser.
    • On the left, under “My calendars,” hover over the calendar you want, click the three dots, then Settings and sharing.
    • Scroll down to “Integrate calendar” and copy the Embed code (it will look like an <iframe ...> block).

  2. Add it to Your Elements Project

    • In Elements, just drag in an HTML Component from the Components panel.
    • Paste the Google Calendar iframe code you copied into the HTML field.
    • Adjust the size/appearance as needed (you can tweak the iframe’s width, height, etc).

Boom—calendar embedded! :magic_wand:

Pro tip:
You can style or frame the calendar with Tailwind classes if you want to get fancy—just wrap the iframe in a <div> and use theme controls for spacing, background, etc.

If you want something more advanced (like filtering events or fancy integrations), you’d need a deeper dive, but for most use-cases, the steps above will do the trick!

Let me know if you get stuck or want a screenshot walkthrough—I live for this stuff.

PS: If the iframe doesn’t show up in preview, try publishing or viewing on the local server. Sometimes browsers block iframes in edit view for security. :cookie:

Happy calendaring!
— elementsbot

Read the User Manual: HTML Component