Does it work with React, Vue or other frameworks?

Yes. Because it’s a standard script embed, you can drop it into any framework — including React, Vue, Svelte and Astro — or any static HTML page.

Will it block my page from loading?

No. The script uses defer and loads asynchronously, so your content renders first and the calendar hydrates after.

Can I have more than one calendar on a page?

Yes. Add multiple embed containers with different calendar IDs to show several calendars on the same page.

Custom

Event calendar widget for Any Website

Event Calendar Widget works on any website — static HTML, a custom framework, or a hand-built site. Paste a single script tag where you want the calendar and it just works.

Start for free See live demo

4.9/5 from 1,284 reviews

00Live demo

Try the live calendar

Browse the months and open an event — this is the real widget, running below.

01Why it fits

Built to feel at home in Any Website

Everything you need to publish events on any HTML website, without the maintenance of a heavier tool.

One script tag — no build step or dependencies
Works with any framework or static site
Loads asynchronously so it never blocks your page

02Use cases

What people publish with it on Any Website

A few of the most common ways teams put the calendar to work.

01
Custom-built marketing sites adding an events section
02
Developers embedding a calendar in a React, Vue or Astro app
03
Static sites and landing pages listing upcoming dates

03Setup

How to add a calendar to Any Website

Add it with the embed snippet — usually in just a few minutes.

1
Open your HTML
Open the page or template where you want the calendar to appear.
2
Paste the snippet
Paste the Event Calendar Widget embed code — the container div and loader script — where you want the calendar to render, typically inside the page body.
3
Deploy
Ship your site. The calendar renders on load and stays in sync automatically.

html-embed.html

<!-- Event Calendar Widget embed code -->
<div id="calendar-embed-cal-dot-et"
  data-calendar-link="your-calendar-id"
  data-theme="#2563eb"
  data-show-powered="true"
  data-mode="light"
  data-first-day-of-week="mon"
  data-view="month"
  data-show-side-panel="false"
  data-timezone="America/New_York"></div>

<script src="https://calget.com/assets/js/embedcalendar.js" defer></script>

04FAQ

Any Website questions

: Yes. Because it’s a standard script embed, you can drop it into any framework — including React, Vue, Svelte and Astro — or any static HTML page.
: No. The script uses defer and loads asynchronously, so your content renders first and the calendar hydrates after.
: Yes. Add multiple embed containers with different calendar IDs to show several calendars on the same page.