The following examples are demonstrating the most interesting functionality.
We recommend you to play with the demo to experience all variations.
The buttons on this share some parameters. They all have the same dates (except the dynamic one), the default style, and adapt to the lightMode of the website.
For more advanced expert cases, have a look at the "Advanced Usage" page.
This is a more or less standard setup with all available calendar types and a time zone set.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
location="World Wide Web"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams','Yahoo'"
lightMode="bodyScheme"
></add-to-calendar-button>
For an all-day event, you would simply leave out the time information.
You can even omit the time zone information here.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
location="World Wide Web"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams','Yahoo'"
lightMode="bodyScheme"
></add-to-calendar-button>
Instead of using a fixed date, you can also go with dynamic ones.
You can use "today" to always use the respective current day.
Adding a number like "+7" after the date string (e.g. "2025-04-18+7") would add 7 days. In the example, we are combining this to make the event always be 2 days from today.
Btw: This example also generates online-event-rich-schema in the background, since the location is a URL.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="today+2"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
location="https://add-to-calendar-button.com"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
lightMode="bodyScheme"
></add-to-calendar-button>
You can define recurring events by setting an RRULE .
Mind that the rule needs to be valid (technically and logically) and that it is not supported by all calendar types - in this example, the specified Yahoo and Outlook.com (and Google, if you're on iOS) options won't show up for that reason.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
location="World Wide Web"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
recurrence="RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=6"
lightMode="bodyScheme"
></add-to-calendar-button>
You can also specify the rule in more simple terms.
Check the "Configuration" page for more details on that.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
location="World Wide Web"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
recurrence="weekly"
recurrence_interval="1"
recurrence_count="6"
recurrence_byDay="WE,FR"
lightMode="bodyScheme"
></add-to-calendar-button>
Events can also have multiple dates, which are not recurring.
For example a workshop consisting of 2 parts.
You define those parts by placing them as separate objects in a dates array.
Individual date and time information would be required - global ones will be ignored.
Events get automatically sorted based on their startDate.
You can omit the starting '[' and ending ']', if necessary (e.g. when using the WordPress Shortcode).
<add-to-calendar-button
name="Event Series"
dates='[
{
"name":"Reminder 1/3 to test the Add to Calendar Button",
"description":"This is the first part to check the Add to Calendar Button script at [url]https://add-to-calendar-button.com/[/url]",
"startDate":"today+3",
"startTime":"10:15",
"endTime":"23:30"
},
{
"name":"Reminder 3/3 to test the Add to Calendar Button",
"description":"This is the third part to check the Add to Calendar Button script at [url]https://add-to-calendar-button.com/[/url]",
"startDate":"today+8",
"startTime":"09:00",
"endTime":"19:00"
},
{
"name":"Reminder 2/3 to test the Add to Calendar Button",
"description":"This is the second part to check the Add to Calendar Button script at [url]https://add-to-calendar-button.com/[/url]",
"startDate":"today+5",
"startTime":"11:30",
"endTime":"20:00"
}
]'
timeZone="America/Los_Angeles"
location="World Wide Web"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
lightMode="bodyScheme"
></add-to-calendar-button>
You can customize the button's label as well as all other text labels.
In the example, we also set the listStyle to an overlay list, slightly reduce the size, and set a custom ics file name.
If you want to change other text blocks, you can do so with the "customLabels" option - check the "Configuration" page as well as our Advanced Example for details.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
location="World Wide Web"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
label="Hit me to save!"
iCalFileName="Reminder-Event"
listStyle="overlay"
size="5"
lightMode="bodyScheme"
></add-to-calendar-button>
Per default, the button is a block element, which opens a dropdown on hover.
As an alternative, you can also make the button render inline.
In this example, we also made the "listStyle" a modal, which automatically sets the click trigger.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
location="World Wide Web"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
label="Click me hard!"
inline
listStyle="modal"
lightMode="bodyScheme"
></add-to-calendar-button>
When you specify only 1 calendar type, there will be no list at all.
Instead, the button itself becomes the calendar link.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="Google"
lightMode="bodyScheme"
></add-to-calendar-button>
With the option "buttonsList", you can split the button into multiple - one per calendar type.
In this example, we also used the round button style and hide the button label.
<add-to-calendar-button
name="[Reminder] Test the Add to Calendar Button"
startDate="2024-10-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
options="'Apple','Google','iCal','Outlook.com','Yahoo'"
buttonsList
hideTextLabelButton
buttonStyle="round"
lightMode="bodyScheme"
></add-to-calendar-button>
Let's directly test most of the options at our playground!
Start playingIf you are looking for crazy customization, you can check out the "danger zone".
Advanced UsageMore functionality (like RSVP) and way less trouble thanks to managed ics file hosting, no-code customization, and more.