EmbedACal
← Back to docs

Embed guide

Add a live calendar to any website in under 60 seconds.

Quick start

Paste this snippet into your HTML where you want the calendar to appear:

HTML
<script src="https://embedacal.com/widget/v2/embedacal.js" defer></script>
<embedacal-widget feed="your-feed-slug" theme="light"></embedacal-widget>

Replace your-feed-slug with the slug you chose when creating your feed.

Embed modes

Single feed

Display events from one calendar feed:

HTML
<embedacal-widget feed="socal-events" theme="light"></embedacal-widget>

All feeds (combined)

Show events from all your feeds merged together:

HTML
<embedacal-widget org="my-org" theme="light"></embedacal-widget>

Custom feed (Pro)

Display a filtered subset of events:

HTML
<embedacal-widget org="my-org" custom="downtown-events" theme="light"></embedacal-widget>

React

JSX
// Add the script tag to your _app.tsx or layout
<Script src="https://embedacal.com/widget/v2/embedacal.js" strategy="lazyOnload" />

// Use the web component anywhere
<embedacal-widget feed="socal-events" theme="light" />

// TypeScript: declare the custom element
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'embedacal-widget': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
          feed?: string;
          org?: string;
          custom?: string;
          theme?: 'light' | 'dark';
        },
        HTMLElement
      >;
    }
  }
}

WordPress

Add a Custom HTML block to any page or post:

HTML
<script src="https://embedacal.com/widget/v2/embedacal.js" defer></script>
<embedacal-widget feed="socal-events" theme="light"></embedacal-widget>

Attributes

AttributeTypeDescription
feedstringFeed slug for single-feed mode
orgstringOrg slug for combined or custom feed mode
customstringCustom feed slug (requires org)
theme"light" | "dark"Color theme (default: light)
disable-stylesbooleanStrip all default CSS for full custom styling