Embed a Calendar on a Website

5 min read

Showing a calendar on a website used to mean a static PDF, a hand-coded table, or a Google Calendar embed that only updates when you edit inside Google. None of those work when the schedule changes often, and none of them give visitors a way to take the calendar with them.

Calfeed gives every published calendar a one-iframe embed snippet. Drop it onto any page. The events render in real time from the same feed the subscribe link serves.

Why an embed beats a static schedule page

A static page is a copy that goes stale the moment you edit the source. Visitors see whatever version was live when the page was last saved. If you also have a subscribable link, the two surfaces drift apart fast.

An embed reads the calendar feed directly. Edit the calendar once. Both the embed and every subscriber's calendar app see the new version. No second copy to maintain.

How the calfeed embed works

Every public calfeed calendar exposes a code snippet to its owner from the calendar's owner view. The snippet is a single iframe with auto-height behavior built in. The frame talks back to the host page enough to resize itself when the event count or device width changes.

The embed inherits custom branding (logo and color) if you have it set on your calfeed profile. Visitors see the same brand whether they read it on your site or after they subscribe.

Drop it into WordPress, Squarespace, Webflow, or Notion

  • WordPress. Add a Custom HTML block. Paste the snippet. Publish.
  • Squarespace. Add a Code Block. Set the language to HTML. Paste.
  • Webflow. Add an Embed element. Paste. Publish the page.
  • Notion. Paste as an iframe block. Notion requires the iframe wrapper to be created via the iframe block, not Custom HTML.
  • Plain HTML. Paste anywhere a div would go. The iframe takes care of its own height.

The snippet is identical across hosts. Generate it once and reuse it.

Embed plus subscribe button: pair them

The embed shows events. The subscribe button lets a visitor take the events with them. Put both on the page.

Below the embed, link to the calfeed calendar page. Visitors who want updates on their own device tap Subscribe and pick Apple, Google, or Outlook. The calendar lands in their app before they close the tab. (Subscribe-flow walkthrough.)

One schedule, two surfaces. Visitors who want to browse, browse. Visitors who want to follow along, subscribe.

Open a calendar and grab the embed snippet from the owner panel.

Questions

Or skip reading. Try it.

Type a schedule. Calfeed builds the calendar.