How to Add an "Add to Calendar" Button in Squarespace (7.1)

Squarespace 7.1 has no built-in "Add to Calendar" button — not on regular pages, and not on Events collection items. If you want one, you have to add it yourself. There are three real ways to do that, from a fully manual, code-based method to a one-click plugin. Here's how each works, so you can pick what fits your comfort level.

Why an "Add to Calendar" button matters

An event on a webpage is passive. A visitor has to notice it, remember it, and manually re-enter the date and time into their own calendar later — which most people never do. An add-to-calendar button removes every one of those steps. One tap and the event — with its title, time, location, and description — lands in their calendar, complete with the default reminder they already have set.

For anyone whose business depends on attendance — a studio, a restaurant with ticketed dinners, a coach running a webinar, a nonprofit with a fundraiser — that's a direct lever on how many people actually show up.

Option 1: The manual approach (hand-built calendar links)

The DIY route is to build the calendar link yourself and attach it to a button using a Squarespace Code Block or button link.

At a high level, each calendar service accepts a specially formatted URL that pre-fills an event. Google Calendar, for example, takes a "template" link containing the event's start time, end time, title, and details as parameters. For Apple Calendar and Outlook, you generate a small .ics file with the same information, host it, and link to it.

The upside: it's free and requires no plugin.

The downside: it's fiddly and easy to get wrong. Dates and times have to be written in a precise UTC format, every field has to be URL-encoded, and you need a different link for each calendar service if you want to cover everyone. You'll also be hand-editing raw code for every new event, and a single formatting slip produces a button that silently opens the wrong date. It works, but it doesn't scale past a couple of events, and it's not something most clients can maintain themselves.

Option 2: Third-party embed widgets

There are external services that generate an add-to-calendar widget you paste into a Squarespace Code Block. This saves you from hand-writing the URLs.

The upside: less manual coding than Option 1.

The downside: these are typically separate subscriptions with their own monthly fees, the widgets often carry the provider's branding, and because they load from a third-party server, some also track your visitors. The styling rarely matches your site, so the button tends to look like an embedded widget rather than a native part of the page.

Option 3: A native "Add to Calendar" block (the easy way)

The simplest option is a purpose-built Squarespace plugin. CalButton adds a native "Add to Calendar" block directly to the 7.1 editor — it appears in your + block menu like any other content block. You fill in the event details in the editor (no code, no date formatting), and it generates buttons that work across Google, Apple, Outlook, Office 365, Yahoo, and .ics automatically. It also drops buttons onto your Events page items for you.

Because it's built for Squarespace, the button inherits your site's fonts and colors instead of looking like a bolted-on widget. It installs with a single line of code, it's a one-time purchase (no subscription), and it doesn't track your visitors — the calendar link is generated in the browser.

The upside: no code per event, every calendar service covered, brand-matched, and something a client can use on their own.

The trade-off: it's a paid plugin rather than a free hand-built link — though at a one-time price, it typically costs less than a single month of a subscription widget.

Which option is right for you?

• One event, ever, and you're comfortable with code? The manual approach (Option 1) will do.
• A few events and you don't mind a monthly fee and third-party branding? An embed widget (Option 2) is workable.
• Recurring events, client sites, or you just want it to look right and take one tap to set up? A native block (Option 3) is the least-effort, best-looking path.

The bottom line

Squarespace 7.1 gives you a great events system but leaves out the one button that turns interest into attendance. You can build that button by hand, rent it from a third-party widget, or add it as a native block in a couple of minutes. If you value your time — or you're building this for clients — the native route is the one worth looking at. You can see CalButton in action here.