Add to calendar button
A free add to calendar button
for your website and emails.
===========================================================
One snippet. Google, Apple, Outlook, Microsoft 365 and Yahoo in one click. Free on every plan with no cap on clicks, and because the event lives on AddCal rather than in your page, every later click gets your edits without you touching the site.
[ Get my button, free ](https://addcal.co/register)[ See it work ](#how)
Unlimited clicks on free Change the event, not your page No coding required
Live button, try it
[Autumn open day 2026-11-21T10:00:00 2026-11-21T12:00:00 America/New\_York Tour the campus and meet the team. Main hall false](https://addcal.co/s/z2xrwph2pl/?title=Autumn+open+day&date_start=2026-11-21T10%3A00%3A00&date_end=2026-11-21T12%3A00%3A00&timezone=America%2FNew_York&description=Tour+the+campus+and+meet+the+team.&location=Main+hall)
Rendered by the real script. Developers: the full attribute reference, themes and headless mode are in the [button documentation ](https://addcal.co/documentation/calendar-button.md).
What visitors get
Click, pick a calendar, done.
-----------------------------
All four themes below are live. Click any of them to see what a visitor sees.
Default
A filled button in your colour. Opens a menu of calendars.
[Autumn open day 2026-11-21T10:00:00 2026-11-21T12:00:00 America/New\_York Tour the campus and meet the team. Main hall false](https://addcal.co/s/z2xrwph2pl/?title=Autumn+open+day&date_start=2026-11-21T10%3A00%3A00&date_end=2026-11-21T12%3A00%3A00&timezone=America%2FNew_York&description=Tour+the+campus+and+meet+the+team.&location=Main+hall)
Light
The outlined version of the same button and menu.
[Autumn open day 2026-11-21T10:00:00 2026-11-21T12:00:00 America/New\_York Tour the campus and meet the team. Main hall false](https://addcal.co/s/z2xrwph2pl/?title=Autumn+open+day&date_start=2026-11-21T10%3A00%3A00&date_end=2026-11-21T12%3A00%3A00&timezone=America%2FNew_York&description=Tour+the+campus+and+meet+the+team.&location=Main+hall)
Icon list
One icon per calendar, no menu. Fits a sidebar or a footer.
[Autumn open day 2026-11-21T10:00:00 2026-11-21T12:00:00 America/New\_York Tour the campus and meet the team. Main hall false](https://addcal.co/s/z2xrwph2pl/?title=Autumn+open+day&date_start=2026-11-21T10%3A00%3A00&date_end=2026-11-21T12%3A00%3A00&timezone=America%2FNew_York&description=Tour+the+campus+and+meet+the+team.&location=Main+hall)
Button list
One labelled button per calendar, wrapping to fit the space.
[Autumn open day 2026-11-21T10:00:00 2026-11-21T12:00:00 America/New\_York Tour the campus and meet the team. Main hall false](https://addcal.co/s/z2xrwph2pl/?title=Autumn+open+day&date_start=2026-11-21T10%3A00%3A00&date_end=2026-11-21T12%3A00%3A00&timezone=America%2FNew_York&description=Tour+the+campus+and+meet+the+team.&location=Main+hall)
### One click to their calendar
The visitor picks Google, Apple, Outlook, Office 365, Yahoo or an ICS file. Google, Outlook, Office 365 and Yahoo open the event pre-filled in the web calendar; Apple and ICS hand the phone or desktop a file that opens in the calendar app.
### The event is hosted, not pasted
The button carries only the event id. Title, time, timezone, location and description live on AddCal, so you fix a typo once and every click from then on gets the fix.
### Four themes, your colour, your label
Pick a theme with data-theme, set the label with data-btn-text and the colour with data-color, or go headless and wrap your own element.
### Every click counted
Clicks per calendar app show up in the event analytics, so you can see whether your audience is on Google or Outlook before you plan the next one.
The ICS option is the universal fallback. If you have never met the format, [ICS vs iCal vs webcal explained](https://addcal.co/blog/ics-vs-ical-vs-webcal-explained.md) covers what the file is and which apps open it.
The whole install
The add to calendar button HTML, all two lines of it.
-----------------------------------------------------
```
```
Copy
1
### Create the event
Title, time, location, timezone. Free, no card, and the event page is live straight away.
2
### Copy the snippet
The Share page gives you this snippet with your event id filled in. Swap evt\_abc123 for yours if you copy it from here.
3
### Paste it in
Drop it into an HTML block. Visitors click, pick their calendar, done. Change the event later and the next click gets the new details.
On websites
Add to calendar button for WordPress, Wix, Squarespace and more
---------------------------------------------------------------
The snippet is the same everywhere. Only the block you paste it into changes.
### WordPress
A Custom HTML block in the page or post. Works on self-hosted sites as an administrator and on WordPress.com plans that allow custom code.
### Wix
Add Elements, Embed Code, Embed HTML. Wix frames the embed, so size the box to the button.
### Squarespace
A Code block set to HTML. Code blocks need the Business plan or above.
### Webflow
An Embed element. The button shows on the published site, not on the Designer canvas.
### Shopify
Show HTML in the page editor, or a Custom Liquid block in a theme section.
### Any HTML page
Paste the link where the button goes and the script once, anywhere on the page.
Need the whole calendar on the page rather than one event? That is the [embeddable calendar](https://addcal.co/solutions/calendar-embed.md), same snippet idea, one line per calendar.
Six ways to get a button
Add to calendar buttons compared
--------------------------------
The question that matters is whether the event lives on a server or in your page. A static button carries the details in your markup, so moving the event means editing every page it is on. A hosted button points at the event, so later clicks get the new details on their own. Either way, copies people already saved only update if they subscribed to the calendar.
| Tool | Free option | Hosted or static | Calendars | In emails | Price |
| --- | --- | --- | --- | --- | --- |
| [AddCal] | Free on every plan, unlimited clicks | Hosted: edits reach later clicks | Google, Apple, Outlook, Microsoft 365, Yahoo, ICS | Yes, via the event links | $0; Premium $12/mo lifts the 10 events a month |
| Add to Calendar Button | Free library, Elastic License 2.0, branding on by default | Static: event details live in your page | Google, Apple, Outlook.com, Microsoft 365, Teams, Yahoo, ICS | No, it is a script | $0 (PRO is a separate product) |
| Add to Calendar PRO | No free plan, 7 day trial | Hosted | Same list as the library | Yes, prepared email links | US$2.25 a month for 5 new events, $19 for 35, $189 for 500 |
| AddEvent | 100 clicks a month on Hobby, then buttons stop; branding removal paid | Hosted from the app; legacy snippet is static | Google, Apple, Outlook, Outlook.com, Office 365, Yahoo | No, separate links product | $29 to $99/mo, clicks capped on every plan |
| AddToCalendar.com | The 2015 script (v1.5, MIT) is still on the page, alongside a menu of AddEvent products | Static | Google, Outlook, Outlook Online, Yahoo, iCalendar | Static links only | $0 for the old script; everything else links to AddEvent |
| [Google Calendar "Publish event"] | Free | Hosted by Google, public calendar required | Google Calendar only | A link, so yes, Google only | $0 |
Prices and limits from each vendor's own pages, last checked 30 October 2026. Billed yearly where a vendor offers it. Trademarks belong to their owners.
In emails
Add to calendar button for email: the Share page writes the HTML.
-----------------------------------------------------------------
Every email client strips JavaScript, so no vendor's button script works in a newsletter. Instead, each event's Share page generates email-safe HTML: table-based, with the Outlook fallback built in, in five styles and any of the supported languages. Content pastes the rendered button straight into your email editor; Copy Code gives you the raw HTML for a template. Underneath, each button is one of the event's [add to calendar links](https://addcal.co/solutions/add-to-calendar-links.md), so they work in any client that renders a link.
- **Add to Calendar Button.** One button with your label. Opens the event page, where the reader picks their calendar.
- **Buttons With Icons.** A row of Google, Apple, Outlook, Office 365, Yahoo and ICS buttons, each a direct link.
- **Text with Icons.** The same five links as text with small icons.
- **Text (dot separated).** Plain inline links for signatures and transactional email.
- **Text (space separated).** The same, spaced instead of dotted.
Customise sets the button label and the language. The API returns the same five snippets on every event, so an automation can drop them into a template. Every link resolves on our side, so the email keeps working if you move the event after it has gone out.
Step by step for[Mailchimp ](https://addcal.co/integrations/mailchimp.md)[Klaviyo ](https://addcal.co/integrations/klaviyo.md)[HubSpot ](https://addcal.co/integrations/hubspot.md)
Add to Calendar Links
Copy the content below and paste it into your email marketing platform.
Customise
Works with: Any email marketing software Gmail Mailchimp Marketo Salesforce HubSpot Constant Contact ActiveCampaign
Add to Calendar
 Google  Apple  Outlook  Office 365  Yahoo  ICS
Styles Add to Calendar Button Buttons With Icons Text with Icons Text (dot separated) Text (space separated) Content Copy Code
FAQ
Add to calendar buttons, answered
---------------------------------
### Is the add to calendar button free?
Yes, on every plan including Free, with no cap on clicks. The free plan limits you to 10 new events a month, 2 calendars and 100 subscribers; Premium lifts those, and a custom domain for the button links is on Business. Nothing switches off when a button gets popular.
### How do I add an add to calendar button to my website?
Create the event in AddCal, open its Share page and copy the button snippet. Paste it into an HTML block wherever the button should appear. The snippet is one link tag plus one script tag; include the script once per page however many buttons you have. WordPress, Wix, Squarespace, Webflow and Shopify all take it in their HTML or embed block.
### Does the button work in emails?
Email clients block scripts, so the button itself cannot run in an email. The event's Share page generates email-safe HTML instead, in five styles: a single Add to Calendar button with your label, buttons with icons for Google, Apple, Outlook, Office 365, Yahoo and an ICS download, text with icons, and dot or space separated text links. Content pastes the rendered version into your editor, Copy Code gives you the HTML, and the API returns the same snippets. They work in Mailchimp, Klaviyo, HubSpot, Constant Contact, ActiveCampaign and plain HTML email.
### Which calendars does it support?
Google Calendar, Apple Calendar, Outlook (classic desktop, Outlook.com and Microsoft 365), Yahoo Calendar and an .ics download for anything else. You can limit the list with data-calendars, for example to Google and Apple only.
### What happens if I change the event after people have clicked?
The button points at the event on AddCal rather than carrying the details in your page, so anyone who clicks after the change gets the new time or location. Copies already saved in someone's calendar update only if they subscribed to the calendar rather than adding the single event, which is true of every add to calendar tool.
### How is this different from the open-source Add to Calendar Button library?
The add-to-calendar-button.com library is a client-side web component: the event details live as attributes in your page, there is no server, and it is free under the Elastic License 2.0 with its branding on by default. It is a good fit for a developer putting one event on a static page that will not change. AddCal stores the event on our side, so edits reach later clicks, you get click analytics, and the same event has links for email, all free.
### Can I style the button to match my site?
Yes. Four themes (default, light, icon list and button list), a custom label with data-btn-text and a custom colour with data-color. If you want full control, add data-addcal-headless and put your own element inside; AddCal wires up the calendar chooser and leaves the styling to you.
### Will the button slow down my website?
No. The script is loaded async and deferred from our CDN, so it never blocks your page from rendering, and the button itself is plain HTML until someone clicks it.
Still have questions?
A real person on our team replies, usually the same business day.
Start live chat
Free on every planOne button. Every calendar.
No cap on clicks.
---------------------------------------------
Create the event, paste two lines of HTML,
and watch the adds come in.
[ Get my button, free ](#start)[ or compare plans and pricing ](https://addcal.co/pricing.md)
15,000+ creators & teams
Free forever ยท no credit card