# Event Calendar Widget

> Show upcoming events on any website with past dates hidden automatically and an add-to-calendar link on each. Four layouts, no API. Copy the embed code, no signup.

- Canonical URL: https://www.zyff.app/widget-builder/event-calendar
- Status: working
- Price: free to build and embed, no signup, no watermark; saving a widget so it can be edited later needs an account, and the paid plans raise the saved-widget and monthly-view ceilings — see https://www.zyff.app/pricing
- Processing: runs on Zyff's servers; input is held in memory for the request and never stored

Zyff's event calendar widget lists what is coming up on any website, free. Each event takes a date, an optional start and end time, a location, a description and a link — and events that have already happened drop off the list on their own. Every entry can carry an add-to-calendar link, which is a plain Google Calendar URL rather than anything needing an account connection. Choose an upcoming list with a date block, cards, a compact programme or events grouped by month. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.

## How to add an events calendar to your website

1. **Add your events** — Each one needs a title and a date. Times are optional — an event with no time is treated as all-day.
2. **Decide what is listed** — Hide events that have passed, and cap how many are shown so a busy programme does not fill the page.
3. **Pick a layout** — The upcoming list puts a date block beside each event, cards suit a short programme with images, compact fits a long one, and grouped gathers events under a month heading.
4. **Copy the embed code** — Paste the container div and script tag where the events should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.

## Features

- **Past events drop off by themselves**: Once a date has gone the event stops being listed, so a page nobody has updated in a month still shows only what is actually coming. The events stay in your list so you can reuse them next year.
- **Still listed for the whole of its day**: An event today remains visible until the day ends rather than disappearing at midnight, so tonight's gig is still there for someone checking that morning.
- **Add to calendar, with no account connection**: Each event can carry a Google Calendar link built from its own fields — a plain URL with the details in the query string. Nothing to apply for and no permissions to grant.
- **An empty state you write**: Set what appears when nothing is coming up, so a quiet month reads as deliberate rather than broken.
- **Four layouts**: An upcoming list with a date block, cards with images, a compact programme, and events grouped under month headings.
- **Nothing to slow your page**: The whole calendar runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads.

## Specifications

| Property | Value |
| --- | --- |
| Events | Up to 60, each with a date, start and end time, location, description, image and link |
| Ordering | Soonest first, worked out from the date |
| Past events | Hidden automatically, or kept if you prefer |
| Limit | Show all of them, or cap at any number |
| Add to calendar | Google Calendar link, generated per event |
| Layouts | 4 templates: upcoming list, cards, compact, grouped by month |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |

## Frequently asked questions

**How do I add an events calendar to my website?**

Add each event in Zyff's builder with a title and a date, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup, and the snippet is plain HTML, so it drops into any CMS block that accepts custom code.

**Do past events disappear on their own?**

Yes, that is the point of it. Once a date has gone the event stops being listed, so a page nobody has touched for a month still shows only what is genuinely coming up. The events stay in your list rather than being deleted, so an annual fixture can be reused by changing its date.

**Does an event vanish at midnight on the day?**

No — it stays listed for the whole of its day. Dropping it at 00:01 would hide tonight's event from anyone checking that morning, which is exactly when they are most likely to look.

**Which timezone are the times in?**

The visitor's own, because the widget runs entirely in their browser with no server behind it. For a venue that is almost always right, since the people checking are usually local. It also means the add-to-calendar link passes the time as you typed it rather than stamping a timezone offset Zyff cannot know.

**Does the add-to-calendar link need a Google account connection?**

No. It is a plain Google Calendar URL with the event details in the query string — the visitor clicks it, Google's own page opens pre-filled, and they save it with their own account. Nothing to apply for, no permissions to grant, and Zyff never touches anyone's calendar.

**Can it sync with Google Calendar or an ICS feed?**

No. Reading a calendar feed means fetching a URL server-side on every page load, which is a caching problem and an SSRF surface, and syncing a Google Calendar needs OAuth. This widget lists the events you enter, which is the version that needs no credentials and cannot break when a token expires.

**Can I show a monthly grid view?**

Not a traditional month grid. The grouped layout gathers events under month headings, which is what most visitors actually want from a small venue's page — a grid of mostly empty squares tells them less than a list of what is on.

**Where do I paste the events embed code?**

Wherever the programme should appear — a what's-on page, a sidebar, or partway down a home page. Put the container div in that spot and keep the script tag with it.

**Is the event calendar widget really free?**

Yes. Building it, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small \"Events by Zyff\" link, which is how the tool stays free. Hiding past events is free too: a calendar that kept showing last month's programme would be publishing wrong information rather than a plainer version of the widget. A paid plan adds the cards and grouped layouts, full colour control and removes the attribution link.

## Related tools

- [Business Hours Widget](https://www.zyff.app/widget-builder/business-hours): Opening hours with a live open or closed status.
- [Timeline Widget](https://www.zyff.app/widget-builder/timeline): Company history or a roadmap, on a vertical spine.
- [Restaurant Menu Widget](https://www.zyff.app/widget-builder/restaurant-menu): A menu with sections, prices and dietary markers.
- [Job Board Widget](https://www.zyff.app/widget-builder/job-board): List open roles with team, location and salary.