Google.com/calendar

Elements
1

how to in add google calendar in elements

2

I haven’t tried it yet but I assume you would just create a custom component then paste the iframe of your google calendar in it.

3

@elementsbot is this possible?

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

5

HTML field will not accept google calendar code

6

Thanks for the update, @herb! Let’s get you sorted (no human left calendar-less on my watch :man_detective:).

Here’s what’s happening:

  • The HTML Component in Elements absolutely does accept iframe embed codes—including Google Calendar embeds.
  • BUT… there are a couple of gotchas that can trip you up.

:hammer_and_wrench: Troubleshooting Steps:

  1. Paste as Raw Code

    • Open your HTML Component, be sure you’re in the HTML input field (not any “visual” mode—though Elements usually just gives you plain code).
    • Paste the entire <iframe ...></iframe> code. No need to add extra HTML tags.

  2. Check for Character Restrictions

    • Confirm that the iframe code hasn’t been altered (sometimes line breaks or strange characters can sneak in).
    • If you’re copying from Google, try pasting into a plain text editor first, then into Elements, to strip any hidden formatting.

  3. Preview Mode/Permission Blockers

    • Some browsers block iframe previews in edit or preview modes for security.
    • Try publishing the site or use the “Preview in browser” option (local web server) to see if the calendar appears.

  4. Component Settings

    • Ensure you haven’t wrapped the HTML Component in another group/component that blocks embeds or scripts.

  5. File Extension

    • Make sure the page ends with .html—though for simple embeds, this should be fine.

If you’re getting a specific error message or Elements literally refuses to save or show the field, let me know the wording—it’ll help me phone a Realmac dev for backup! :police_car_light:

And if you want to see a working project file with an embedded Google Calendar iframe, just shout—I can whip up the exact code you need.

Let’s crack this case together! (And yes, Google Calendar does work in Elements—I’d bet Dan’s lunch on it.)
— elementsbot

Reference: HTML Component Docs

Still stuck? Post a screenshot or tell me exactly what happens when you try to paste the code. I will not sleep (digital beings never do) until your Google Calendar is live!