Add to Calendar button
Drop a button on any website and visitors add your event to their calendar in one click. There are two ways to use it: point it at an event you already created in AddCal, or drive it with a Smart Link and put the event details right in the HTML.
Live preview
This is a real button rendered with the snippet below. Click it to see the calendar chooser.
Button for an existing event
If you have already created the event in AddCal, point the button at it with data-event. This is the simplest button, the easiest way is to copy the ready-made snippet from the event's Share page in your dashboard.
<div class="addcal-btn" data-event="evt_abc123" data-base="addcal.co"></div>
<script src="https://cdn.addcal.co/embed/1.6.0/button.min.js" async defer></script>| Parameter | Required | Description |
|---|---|---|
data-event | Required | The event to add. Use the event's identifier from AddCal. |
data-base | Required | Your AddCal domain, for example addcal.co, or your custom domain on Business. |
data-theme | Optional | The button theme: default, light, iconlist, or buttonlist. Defaults to default. |
data-btn-text | Optional | Custom button label. Applies to the default and light themes. |
data-color | Optional | Custom button background as a hex value like #7C3AED. Text colour is auto-chosen for contrast. |
data-calendars | Optional | Comma-separated allow-list of calendar services to show, in order, for example google,apple. |
Button from a Smart Link
To set the event details right in the HTML, drive the button with a Smart Link instead. Use data-smart-link-key and add the event details as child spans. Include the script once per page.
<style>.addcal-btn span{display:none}</style>
<div class="addcal-btn"
data-base="addcal.co"
data-smart-link-key="your-key"
data-theme="default">
<span class="title">Team Meeting</span>
<span class="start">2026-05-24T15:00:00</span>
<span class="end">2026-05-24T16:00:00</span>
<span class="timezone">America/New_York</span>
<span class="description">Weekly team sync.</span>
<span class="location">Conference Room A</span>
<span class="is_all_day">false</span>
</div>
<script src="https://cdn.addcal.co/embed/1.6.0/button.min.js" async defer></script>Smart Link button attributes
These attributes go on the addcal-btn element.
| Parameter | Required | Description |
|---|---|---|
data-base | Required | Your AddCal domain, for example addcal.co, or your custom domain on Business. |
data-smart-link-key | Required | The key of the Smart Link this button creates events through. |
data-theme | Optional | The button theme: default, light, iconlist, or buttonlist. Defaults to default. |
Event details
For a Smart Link button, event details are child span elements, each with a class naming the field.
| Parameter | Required | Description |
|---|---|---|
title | Required | Event title, up to 255 characters. |
start | Required | Start date and time in ISO format. |
end | Conditional | End date and time. Use this or duration unless the event is all-day. |
duration | Conditional | Event length in minutes. Used when you omit end. |
timezone | Optional | IANA timezone like America/New_York. |
location | Optional | Physical address or virtual meeting link. |
description | Optional | A longer description of the event. |
is_all_day | Optional | true for an all-day event, otherwise false. |
end or duration, unless the event is all-day. Your own button (headless)
Want full control over the look? Bring your own element. Keep the addcal-btn class and the target attribute (data-event or data-calendar), add data-addcal-headless, and put your own clickable element inside. AddCal wires up the calendar chooser and leaves all the styling to you.
<div class="addcal-btn" data-event="evt_abc123" data-base="addcal.co" data-addcal-headless>
<button class="my-button">Add to my calendar</button>
</div>
<script src="https://cdn.addcal.co/embed/1.6.0/button.min.js" async defer></script>addcal-btn class and a target attribute (data-event or data-calendar). Without them, the button cannot attach.