Solutions
Back to Documentation
Automated
add to calendar button
for websites
This tool provides a quick and effortless way for your users to add your events to their calendars. When you add an “add to calendar” button to your website, you increase the likelihood that your users will add your event to their calendars by reducing the time and effort required to do so. Read more
Example:
Add to Calendar
07/29/2025 08:00 AM
07/29/2025 10:00 AM
America/Los_Angeles
Summary of the event
Description of the event
Location of the event
MM/DD/YYYY
USER-CLIENT-ID
Please notice This button is for singular events.
We also have an add to calendar button (for calendars).
Install on a website, parameters and attributes
1
Copy and paste the script in the <head> section into your websites head section.
2
Copy the button code and paste it where you want it to appear on your website.
3
Add the domain where you use the button in the domains section.
<html>
<head>
<!-- AddEvent script -->
<script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>
</head>
<body>
<!-- Button code -->
<div title="Add to Calendar" class="addeventatc">
Add to Calendar
<span class="start">07/29/2025 08:00 AM</span>
<span class="end">07/29/2025 10:00 AM</span>
<span class="timezone">America/Los_Angeles</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
</div>
</body>
</html>
Parameter
Description
start
Required
<span class="start">07/29/2025 03:00 PM</span>
Start date of the event. Accepts most date/time formats, e.g. 07/29/2025 03:00 PM (12-hour format) or 29-07-2025 15:00 (24-hour format).
Use numeric values to describe the date, e.g. "07/29/2025" and not textual, e.g. "July 29th, 2025".
Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d. To avoid potential ambiguity, it's best to use ISO 8601 (YYYY-MM-DD) dates
Date examples:
07/29/2025 03:00 PM or 29-07-2025 15:00 or 2025/07/29 03:00 PM or 2025-07-29 15:00
<span class="start">07/29/2025 03:00 PM</span>
Start date of the event. Accepts most date/time formats, e.g. 07/29/2025 03:00 PM (12-hour format) or 29-07-2025 15:00 (24-hour format).
Use numeric values to describe the date, e.g. "07/29/2025" and not textual, e.g. "July 29th, 2025".
Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d. To avoid potential ambiguity, it's best to use ISO 8601 (YYYY-MM-DD) dates
Date examples:
07/29/2025 03:00 PM or 29-07-2025 15:00 or 2025/07/29 03:00 PM or 2025-07-29 15:00
end
<span class="end">07/29/2025 05:00 PM</span>
End date of the event. Accepts most date/time formats, e.g. 07/29/2025 05:00 PM (12-hour format) or 29-07-2025 17:00 (24-hour format).
Use numeric values to describe the date, e.g. "07/29/2025" and not textual, e.g. "July 29th, 2025".
Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d. To avoid potential ambiguity, it's best to use ISO 8601 (YYYY-MM-DD) dates
Date examples:
07/29/2025 05:00 PM or 29-07-2025 17:00 or 2025/07/29 05:00 PM or 2025-07-29 17:00
If end is not defined, the end date is automatically set to start date plus one hour.
End date of the event. Accepts most date/time formats, e.g. 07/29/2025 05:00 PM (12-hour format) or 29-07-2025 17:00 (24-hour format).
Use numeric values to describe the date, e.g. "07/29/2025" and not textual, e.g. "July 29th, 2025".
Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d. To avoid potential ambiguity, it's best to use ISO 8601 (YYYY-MM-DD) dates
Date examples:
07/29/2025 05:00 PM or 29-07-2025 17:00 or 2025/07/29 05:00 PM or 2025-07-29 17:00
If end is not defined, the end date is automatically set to start date plus one hour.
timezone
<span class="timezone">Europe/Paris</span>
The events time zone, e.g. Europe/Paris or America/Los_Angeles.
If timezone is applied (highly recommended), date/time will be converted to Zulu time / GMT / UTC. If timezone is not applied, date/time will be parsed as is (fluid date/time).
** Please notice: We're currently using the Microsoft Events API for inserting events into Outlook.com and Office 365. Those options does not allow fluid time and a timezone is required.
Explanation: The timezone parameter makes sure the date/time is correct no matter if you are in New York or Sydney. If your event has users from multiple time zones in the world, it's highly recommended to use the parameter.
The events time zone, e.g. Europe/Paris or America/Los_Angeles.
If timezone is applied (highly recommended), date/time will be converted to Zulu time / GMT / UTC. If timezone is not applied, date/time will be parsed as is (fluid date/time).
** Please notice: We're currently using the Microsoft Events API for inserting events into Outlook.com and Office 365. Those options does not allow fluid time and a timezone is required.
Explanation: The timezone parameter makes sure the date/time is correct no matter if you are in New York or Sydney. If your event has users from multiple time zones in the world, it's highly recommended to use the parameter.
title
Required
<span class="title">Title of event</span>
Title of the event. Single line string.
<span class="title">Title of event</span>
Title of the event. Single line string.
description
<span class="description">Description of event</span>
Description of the event. Use <br> to separate lines.
The field accepts plain text or simplified HTML. Simplified HTML is supported by calendar clients like Outlook and Apple Calendar. If the calendar client does accept HTML, the content of the field is automatically converted into readable text.
Keep the description short and to the point. Link to a website for further details if the event description is long. Maximum 500 characters recommended.
Reason: Most modern browsers allow an unlimited number of characters to be transferred by the browser. Internet Explorer / Edge only allows ~2000 characters. A 500 characters maximum is recommended to make sure your event is cross browser compatible.
Description of the event. Use <br> to separate lines.
The field accepts plain text or simplified HTML. Simplified HTML is supported by calendar clients like Outlook and Apple Calendar. If the calendar client does accept HTML, the content of the field is automatically converted into readable text.
Keep the description short and to the point. Link to a website for further details if the event description is long. Maximum 500 characters recommended.
Reason: Most modern browsers allow an unlimited number of characters to be transferred by the browser. Internet Explorer / Edge only allows ~2000 characters. A 500 characters maximum is recommended to make sure your event is cross browser compatible.
location
<span class="location">Eiffel Tower</span>
Event location, e.g. "Eiffel Tower, Paris".
Event location, e.g. "Eiffel Tower, Paris".
organizer
<span class="organizer">John Johnson</span>
Event organizer, e.g. "John Johnson".
If you fill out organizer you must also include the organizer_email field.
If you include an organizer and an organizer_email, the event is considered to be a "meeting" by calendar clients like Outlook. If you don't include the fields, the event is considered to be an "appointment".
Event organizer, e.g. "John Johnson".
If you fill out organizer you must also include the organizer_email field.
If you include an organizer and an organizer_email, the event is considered to be a "meeting" by calendar clients like Outlook. If you don't include the fields, the event is considered to be an "appointment".
organizer_email
<span class="organizer_email">john@example.com</span>
Event organizer e-mail, e.g. "your@email.com".
If you fill out organizer_email you must also include the organizer field.
If you include an organizer and an organizer_email, the event is considered to be a "meeting" by calendar clients like Outlook. If you don't include the fields, the event is considered to be an "appointment".
Event organizer e-mail, e.g. "your@email.com".
If you fill out organizer_email you must also include the organizer field.
If you include an organizer and an organizer_email, the event is considered to be a "meeting" by calendar clients like Outlook. If you don't include the fields, the event is considered to be an "appointment".
facebook_event
<span class="facebook_event">https://www.facebook.com/events/...</span>
Link to an event on Facebook, e.g. https://www.facebook.com/events/...
If you include a link in the field, a Facebook option is included in the dropdown menu.
Link to an event on Facebook, e.g. https://www.facebook.com/events/...
If you include a link in the field, a Facebook option is included in the dropdown menu.
all_day_event
<span class="all_day_event">true</span>
All day event. Accepts true or false.
All day event. Accepts true or false.
date_format
<span class="date_format">MM/DD/YYYY</span>
The format of the date in start and end. Accepts the values MM/DD/YYYY or DD/MM/YYYY only. Lets the engine know how to handle the date, e.g. 12-hour format (MM/DD/YYYY) or 24-hour format (DD/MM/YYYY).
The format of the date in start and end. Accepts the values MM/DD/YYYY or DD/MM/YYYY only. Lets the engine know how to handle the date, e.g. 12-hour format (MM/DD/YYYY) or 24-hour format (DD/MM/YYYY).
alarm_reminder
<span class="alarm_reminder">15</span>
Event reminder. Trigger an event reminder e.g. "15" minutes before the event starts.
Accepted input: Number
Example: Reminder "15" minutes before event starts = 15 or
one day before event starts : 60 minutes x 24 hours = 1440.
Event reminders are currently supported by:
- Apple Calendar
- Google Calendar (using Google Events API)
- Outlook
- Outlook.com (using Microsoft Events API)
Event reminder. Trigger an event reminder e.g. "15" minutes before the event starts.
Accepted input: Number
Example: Reminder "15" minutes before event starts = 15 or
one day before event starts : 60 minutes x 24 hours = 1440.
Event reminders are currently supported by:
- Apple Calendar
- Google Calendar (using Google Events API)
- Outlook
- Outlook.com (using Microsoft Events API)
recurring
<span class="recurring">FREQ=DAILY;INTERVAL=2;COUNT=5</span>
Make the event repeat for a number of times.
Generate Recurring Rule
Please notice: The start date/time must match the recurrence rule in order to work in strict calendar systems like Outlook and Apple Calendar.
Recurring rules are currently supported by:
- Apple Calendar
- Google Calendar (using "Direct" and Google Events API)
- Office 365 (using the Microsoft Events API)
- Outlook
- Outlook.com (using Microsoft Events API)
Make the event repeat for a number of times.
Generate Recurring Rule
Please notice: The start date/time must match the recurrence rule in order to work in strict calendar systems like Outlook and Apple Calendar.
Recurring rules are currently supported by:
- Apple Calendar
- Google Calendar (using "Direct" and Google Events API)
- Office 365 (using the Microsoft Events API)
- Outlook
- Outlook.com (using Microsoft Events API)
calname
<span class="calname">use-title</span>
Custom filenaming of the .ics file used for e.g. Outlook and Apple Calendar. If not specified the name defaults to "event.ics". Use the phrase use-title to use the title from the title parameter or enter a custom filename.
Custom filenaming of the .ics file used for e.g. Outlook and Apple Calendar. If not specified the name defaults to "event.ics". Use the phrase use-title to use the title from the title parameter or enter a custom filename.
attendees
<span class="attendees">joe@example.com</span>
Add one or multiple attendees (pre-populated) to the event. Enables the pre-populated attendee(s) to get a response from the attendee. Separate multiple attendees (email addresses) with a comma.
Example:
<span class="attendees">joe@example.com,jack@example.com</span>
Add one or multiple attendees (pre-populated) to the event. Enables the pre-populated attendee(s) to get a response from the attendee. Separate multiple attendees (email addresses) with a comma.
Example:
<span class="attendees">joe@example.com,jack@example.com</span>
uid
<span class="uid">my-unique-id123@addevent.com</span>
Define your own UID for the event. If not specified, a system UID is generated. Please notice; Yahoo Calendar reports error 404 if an UID is defined. We therefore don't include UID's in Yahoo Calendar.
Warning. Use this option only if it serves a purpose in your coding.
Define your own UID for the event. If not specified, a system UID is generated. Please notice; Yahoo Calendar reports error 404 if an UID is defined. We therefore don't include UID's in Yahoo Calendar.
Warning. Use this option only if it serves a purpose in your coding.
sequence
<span class="sequence">3</span>
Sequence is the number of times your event has been changed/updated and should be used in combination with an UID.
Warning. Use this option only if it serves a purpose in your coding.
Sequence is the number of times your event has been changed/updated and should be used in combination with an UID.
Warning. Use this option only if it serves a purpose in your coding.
status
<span class="status">CONFIRMED</span>
Define the status parameter in the .ics file used for e.g. Outlook and Apple Calendar. The options can be CONFIRMED, TENTATIVE, CANCELLED, NEEDS-ACTION, COMPLETED, IN-PROCESS according to the iCalendar guidelines.
If the value is not defined (recommended), the system defaults to "CONFIRMED".
Warning. Use this option only if it serves a purpose in your coding.
Define the status parameter in the .ics file used for e.g. Outlook and Apple Calendar. The options can be CONFIRMED, TENTATIVE, CANCELLED, NEEDS-ACTION, COMPLETED, IN-PROCESS according to the iCalendar guidelines.
If the value is not defined (recommended), the system defaults to "CONFIRMED".
Warning. Use this option only if it serves a purpose in your coding.
client
<span class="client">USER-CLIENT-ID</span>
The client field refers to your account ID.
If you want the domain on which your "add to calendar" button appears to be automatically added to your accounts list of domains, then include the client tag in the button code.
The client field refers to your account ID.
If you want the domain on which your "add to calendar" button appears to be automatically added to your accounts list of domains, then include the client tag in the button code.
method
<span class="method">PUBLISH</span>
If defined, a method parameter is added in the .ics file used by e.g. Outlook and Apple Calendar. If not defined, no method parameter is added in the .ics file. http://www.kanzaki.com/docs/ical/method.html + https://tools.ietf.org/html/rfc2446
Examples of usage:
PUBLISH, REQUEST, CANCEL, "REFRESH".
Warning. Use this option only if it serves a purpose in your coding.
If defined, a method parameter is added in the .ics file used by e.g. Outlook and Apple Calendar. If not defined, no method parameter is added in the .ics file. http://www.kanzaki.com/docs/ical/method.html + https://tools.ietf.org/html/rfc2446
Examples of usage:
PUBLISH, REQUEST, CANCEL, "REFRESH".
Warning. Use this option only if it serves a purpose in your coding.
transp
<span class="transp">TRANSPARENT</span>
Determines whether the event appears as "free" or "busy" on the users calendar. Default value is OPAQUE (busy).
Accepted values:
TRANSPARENT or OPAQUE.
Determines whether the event appears as "free" or "busy" on the users calendar. Default value is OPAQUE (busy).
Accepted values:
TRANSPARENT or OPAQUE.
Parameter
Description
data-direct
<div class="addeventatc" .. data-direct="google">
The attribute disables the dropdown and makes the button a direct link to the service specified.
Accepted values: apple or google or office365 or outlook or outlookcom or yahoo
The attribute disables the dropdown and makes the button a direct link to the service specified.
Accepted values: apple or google or office365 or outlook or outlookcom or yahoo
data-dropdown-x
<div class="addeventatc" .. data-dropdown-x="left">
Control the horizontal position of the dropdown.
Accepted values: left or right or auto
Control the horizontal position of the dropdown.
Accepted values: left or right or auto
data-dropdown-y
<div class="addeventatc" .. data-dropdown-y="up">
Control the vertical position of the dropdown.
Accepted values: up or down or auto
Control the vertical position of the dropdown.
Accepted values: up or down or auto
data-render
<div class="addeventatc" .. data-render="inline-buttons">
The attribute ensures that the options are generated and displayed at load. The attribute furthermore disables the default CSS.
Accepted value: inline-buttons
The attribute ensures that the options are generated and displayed at load. The attribute furthermore disables the default CSS.
Accepted value: inline-buttons
data-styling
<div class="addeventatc" .. data-styling="none">
The attribute disables the default CSS.
Accepted value: none
The attribute disables the default CSS.
Accepted value: none
data-intel
<div class="addeventatc" .. data-intel="false">
If we can detect which device the user is on (e.g. an iDevice) it makes sense to automatically select the "Apple" option on click instead of showing the dropdown option. The behavior can be disabled by setting "data-intel" to "false".
Accepts: true or false. Default is true.
If we can detect which device the user is on (e.g. an iDevice) it makes sense to automatically select the "Apple" option on click instead of showing the dropdown option. The behavior can be disabled by setting "data-intel" to "false".
Accepts: true or false. Default is true.
data-google-api
<div class="addeventatc" .. data-google-api="true">
The attribute enables the Google Events API for adding events to users calendar.
Accepted value: true
AddEvent uses Google's "Direct" non-API method to add events to Google Calendar by default. This method offers a great user experience but has limitations in what can be controlled from our side (e.g. custom reminders are not supported).
AddEvent also supports the recommended Google Events API to insert events into user's calendars. In order to use the Google Events API simply add the data-attribute to your button code and set the value to "true".
The attribute enables the Google Events API for adding events to users calendar.
Accepted value: true
AddEvent uses Google's "Direct" non-API method to add events to Google Calendar by default. This method offers a great user experience but has limitations in what can be controlled from our side (e.g. custom reminders are not supported).
AddEvent also supports the recommended Google Events API to insert events into user's calendars. In order to use the Google Events API simply add the data-attribute to your button code and set the value to "true".
data-outlook-api
<div class="addeventatc" .. data-outlook-api="true">
The attribute enables the Microsoft Events API for adding events to users calendar.
Accepted value: true
AddEvent uses Microsoft's "Direct" non-API method to add events to Microsoft (online) Calendars by default. This method offers a great user experience but has limitations in what can be controlled from our side (e.g. custom reminders and recurring rules are not supported).
AddEvent also supports the recommended Microsoft Events API to insert events into user's calendars. In order to use the Microsoft Events API simply add the data-attribute to your button code and set the value to "true".
The attribute enables the Microsoft Events API for adding events to users calendar.
Accepted value: true
AddEvent uses Microsoft's "Direct" non-API method to add events to Microsoft (online) Calendars by default. This method offers a great user experience but has limitations in what can be controlled from our side (e.g. custom reminders and recurring rules are not supported).
AddEvent also supports the recommended Microsoft Events API to insert events into user's calendars. In order to use the Microsoft Events API simply add the data-attribute to your button code and set the value to "true".
Use the advanced settings to change labels in the dropdown and control button behaviour.
<html>
<head>
<!-- AddEvent script -->
<script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>
<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
addeventatc.settings({
appleical : {show:true, text:"Apple Calendar"},
google : {show:true, text:"Google <em>(online)</em>"},
office365 : {show:true, text:"Office 365 <em>(online)</em>"},
outlook : {show:true, text:"Outlook"},
outlookcom : {show:true, text:"Outlook.com <em>(online)</em>"},
yahoo : {show:true, text:"Yahoo <em>(online)</em>"}
});
};
</script>
</head>
<body>
<!-- Button code -->
<div title="Add to Calendar" class="addeventatc">
Add to Calendar
<span class="start">07/29/2025 08:00 AM</span>
<span class="end">07/29/2025 10:00 AM</span>
<span class="timezone">America/Los_Angeles</span>
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
</div>
</body>
</html>
Parameters
Parameter
Description
license
license : "USER-CLIENT-ID"
User account ID. Removes the "AddEvent" branding in button dropdown. An account ID is provided in the Account section. The branding can also be removed using CSS, please review the code examples above (in "Advanced settings").
User account ID. Removes the "AddEvent" branding in button dropdown. An account ID is provided in the Account section. The branding can also be removed using CSS, please review the code examples above (in "Advanced settings").
mouse
mouse : true
Show options dropdown on mouseover. Accepts true or false. Default is false.
Show options dropdown on mouseover. Accepts true or false. Default is false.
css
css : true
Use AddEvent default CSS. Removes default button CSS if set to false. Accepts true or false. Default is true.
Use AddEvent default CSS. Removes default button CSS if set to false. Accepts true or false. Default is true.
appleical
appleical : {show:true, text:"Apple"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
google
google : {show:true, text:"Google <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
office365
office365 : {show:true, text:"Office 365 <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
outlook
outlook : {show:true, text:"Outlook"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
outlookcom
outlookcom : {show:true, text:"Outlook.com <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
yahoo
yahoo : {show:true, text:"Yahoo <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
facebook
facebook : {show:true, text:"Facebook"}
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.
dropdown
dropdown : {order:"appleical,google,office365,outlook,outlookcom,yahoo"}
Sort order of the items in the dropdown. Please notice: This setting both sorts and limits the options in the dropdown. If an item in the list is left out, the option is not displayed in the dropdown.
Sort order of the items in the dropdown. Please notice: This setting both sorts and limits the options in the dropdown. If an item in the list is left out, the option is not displayed in the dropdown.
Use the event listeners to capture button and dropdown events. Usable for e.g. Google Analytics.
/* Attach events after the button has been loaded */
window.addeventasync = function(){
/* Capture click on button */
addeventatc.register('button-click', function(obj){
/* Log */
console.log('button-click -> ' + obj.id);
});
/* Capture mouseover on button */
addeventatc.register('button-mouseover', function(obj){
/* Log */
console.log('button-mouseover -> ' + obj.id);
});
/* Capture mouseout on button */
addeventatc.register('button-mouseout', function(obj){
/* Log */
console.log('button-mouseout -> ' + obj.id);
});
/* Capture when dropdown is being displayed */
addeventatc.register('button-dropdown-show', function(obj){
/* Log */
console.log('button-dropdown-show -> ' + obj.id);
});
/* Capture when dropdown is being hidden */
addeventatc.register('button-dropdown-hide', function(obj){
/* Log */
console.log('button-dropdown-hide -> ' + obj.id);
});
/* Capture when an option in the dropdown is clicked */
addeventatc.register('button-dropdown-click', function(obj){
/* Log */
console.log('button-dropdown-click -> ' + obj.id + ', service -> ' + obj.service);
/* Track event click with e.g. Google Analytics (using analytics.js)
https://developers.google.com/analytics/devguides/collection/analyticsjs/events */
ga('send', 'event', 'MyEvent', 'play', 'Fall Campaign');
});
};
Parameters
Parameter
Description
button-click
Returns the object->id of the button that was clicked.
button-mouseover
Returns the object->id of the button that was moused over.
button-mouseout
Returns the object->id of the button that was moused out.
button-dropdown-show
Returns the object->id of the button when the dropdown was displayed.
button-dropdown-hide
Returns the object->id of the button when the dropdown was hidden.
button-dropdown-click
Returns the object->id + object->service when an option in the dropdown was clicked.
In our dedicated themes section, you can find 18 different pre-built themes in white- and dark mode hosted on our CDN. View the example code, copy it, add it to your website, and you are ready to go.
Feature
Description
Install
Easy to install and configure. Use our hosted scripts or download for local usage.
Time zone and DST
Time zone and daylight saving time compatible. Makes sure date/time is correct across time zones.
Secure
All traffic is secured with RapidSSL 256-bit encryption issued by GeoTrust.
Touch- and user-friendly
Designed and tested to work with desktops, tablets and mobile devices. Optimized for touch devices, user-friendly and easy to understand calendar options.
Keyboard Accessible
Fully keyboard accessible. WAI compliant (W3C). Useful to people with disabilities.
Accessibility is required by law in many countries.
No dependencies
Written in pure javascript. No need to install anything on your server. Using backwards compatible technologies to support older browsers (down to IE6).
Advanced Javascript settings
Change labels and re-order/limit options in dropdown. Change button behaviour and disable CSS.
Javascript Event listeners
Attach event listeners to observe which buttons/options are clicked.
Custom CSS and themes
Customize the button to fit your design or use a theme locally on your own servers.
Event reminders
Custom event reminders in Apple, Google, Outlook and Outlook.com.
Recurring events
Custom recurring events in Apple, Google, Outlook and Outlook.com.
Supported calendars
Apple Calendar, Google Calendar, Outlook, Outlook.com and Yahoo Calendar.
Supported devices
All modern browsers and phone devices like Android, iPhone, Samsung, Windows.
Reliable
More than 300,000,000 events have been added to users calendars using AddEvent.
Questions and answers
Below you'll find some of the most asked questions.
- The button doesn't work in Angular
- Angular and similar frameworks work ASYNC. After you have loaded the content on your page, please call the refresh function addeventatc.refresh();. Depending on how your code is structured, you might want to wrap the refresh function inside a timed function, e.g. setTimeout(function(){addeventatc.refresh();}, 200);
- Using AddEvent with jQuery Mobile?
- With jQuery Mobile all links are considered to be internal. If your button is a link then please add attributes to the button in order to get it to work. <a ... class="addeventatc" data-role="none" rel="external">
- I'm reloading parts of my website with AJAX, how do I refresh the code?
- Call the refresh function addeventatc.refresh(); after your content has been loaded.
- Where is the "old" time zones located? (Used by e.g. LeadPages)
- Please notice the "old" time zones are deprecated. The "old" time zones are still supported but not recommended. List of old time zones
- Do you have a list containing all of the time zones?
- You can find the available timezones to use either by hitting the “List timezones” endpoint of our API, or by using our timezone lookup tool.
- Is there a way to prevent the brief "flash" of unstyled content before the button styling gets applied?
-
Yes! Add below class to your existing stylesheet.
.addeventatc {visibility:hidden;} - Can I use the “add to calendar” button in newsletters?
- The “add to calendar” button in this section can't be used in newsletters due to email security. For newsletters you should use the Dashboard to create events. If you are using a Mail API then please take a look at the Automated Events which enables you to create events on-the-fly or attach events in newsletters.
- Is it possible to change the language in the button and drop down?
- Absolutely. Simply change the text in the button by replacing the text “add to calendar”. On this page, The "add to calendar" in your native language you can find the phrase “Add to Calendar” translated into other languages. In order to change the text in the drop down, please review the "Advanced settings" section on this page.
We're happy to help you out in case you have any questions not listed above. Check out our Help Center or get in touch with Support.