EventCalendarSign In

How to embed your calendar

Add your live event calendar to any website in under 2 minutes. No code experience needed.

1

Log in to your dashboard

Sign in at events.svn.ooo and go to the Settings tab.

2

Copy your embed code

Scroll to the "Embed Your Calendar" section. You'll see a snippet like this — click Copy.

<iframe
  src="https://events.svn.ooo/cal/your-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border:none;border-radius:12px;"
  title="Event Calendar">
</iframe>
3

Paste it on your website

Drop the code into any HTML block on your site. Works everywhere:

Shopify

Online Store → Pages → Edit (HTML view) → paste code

WordPress

Gutenberg → Custom HTML block → paste code

Squarespace

Edit Page → Add Block → Code → paste code

Webflow

Add Element → Embed → paste code

Wix

Add Elements → More → HTML Code → paste code

Any HTML

Open your .html file and paste anywhere in the <body>

4

Customize the size (optional)

Change the height or width to fit your layout. The calendar is fully responsive.

<!-- Full width, taller for more events -->
<iframe src="..." width="100%" height="900" ...></iframe>

<!-- Fixed width, centered -->
<iframe src="..." width="800" height="700" 
  style="display:block;margin:0 auto;border:none;border-radius:12px;">
</iframe>

Shopify (step-by-step)

  1. Go to Online Store → Pages in your Shopify admin
  2. Open the page you want to add the calendar to (e.g. Events page)
  3. Click the <> icon in the editor to switch to HTML view
  4. Paste the embed code and click Save
  5. Preview your page — the live calendar appears instantly

Tip: You can also add it to a product page, the home page, or any blog post.

FAQ

Does the calendar update automatically?

Yes. Any event you add, edit, or delete in your dashboard shows up on your embedded calendar instantly — no need to update the embed code.

Can I control how it looks?

Yes. Go to the Branding tab in your dashboard to set your brand colors. The embedded calendar reflects those colors automatically.

What if I need a different height?

Change the height= attribute in the code. If you have many events, try 900 or 1100. The calendar scrolls internally so any height works.

Will it work on mobile?

Yes. The calendar is fully responsive. On mobile, the month grid adapts automatically.

Go to your dashboard