-
Add to Calendar button
Add to Calendar button for websites -
Events with RSVP
Events for newsletters and campaigns -
Subscription Calendar
Add a series of events to your calendar -
Direct URL Method (and API's)
Create events on-the-fly -
Analytics & Reporting
Get insights about how users engage -
CalendarX
Professional subscription calendar
Add to Calendar button (for websites)
Version:
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
The "Add to Calendar" button for events on websites and calendars is easy to install, language independent,
time zone and DST compatible.
It works perfectly in all modern browsers, tablets and mobile devices,
and with Apple Calendar, Google Calendar, Outlook, Outlook.com and Yahoo Calendar.
Example:
Add to Calendar
05/10/2018 08:00 AM
05/10/2018 10:00 AM
America/Los_Angeles
Summary of the event
Description of the event
Location of the event
MM/DD/YYYY
USER-CLIENT-ID
1
Copy and paste the script in the <head> section into your websites head section.
If you use WordPress, we recommend that you paste the script just before the </body> tag.
If you use WordPress, we recommend that you paste the script just before the </body> tag.
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://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">05/10/2018 08:00 AM</span>
<span class="end">05/10/2018 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>
Parameters
Parameter
Description
start
Required
<span class="start">05/10/2018 03:00 PM</span>
Start date of the event. Accepts most date/time formats, e.g. 05/10/2018 03:00 PM (12-hour format) or 10-05-2018 15:00 (24-hour format).
Use numeric date values, e.g. "05/10/2018" and not textual, e.g. "May 10th, 2018". Dates seperated with "/" are interpreted as "mm/dd/yyyy". Dates seperated with "-" are interpreted as "dd/mm/yyyy".
Date examples:
05/10/2018 03:00 PM or 10-05-2018 15:00 or 2018/05/10 03:00 PM or 2018-05-10 15:00
<span class="start">05/10/2018 03:00 PM</span>
Start date of the event. Accepts most date/time formats, e.g. 05/10/2018 03:00 PM (12-hour format) or 10-05-2018 15:00 (24-hour format).
Use numeric date values, e.g. "05/10/2018" and not textual, e.g. "May 10th, 2018". Dates seperated with "/" are interpreted as "mm/dd/yyyy". Dates seperated with "-" are interpreted as "dd/mm/yyyy".
Date examples:
05/10/2018 03:00 PM or 10-05-2018 15:00 or 2018/05/10 03:00 PM or 2018-05-10 15:00
end
<span class="end">05/10/2018 05:00 PM</span>
End date of the event. Accepts most date/time formats, e.g. 05/10/2018 05:00 PM (12-hour format) or 10-05-2018 17:00 (24-hour format).
Use numeric date values, e.g. "05/10/2018" and not textual, e.g. "February 18, 2017". Dates seperated with "/" are interpreted as "mm/dd/yyyy". Dates seperated with "-" are interpreted as "dd/mm/yyyy".
Date examples:
05/10/2018 05:00 PM or 10-05-2018 17:00 or 2018/05/10 05:00 PM or 2018-05-10 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. 05/10/2018 05:00 PM (12-hour format) or 10-05-2018 17:00 (24-hour format).
Use numeric date values, e.g. "05/10/2018" and not textual, e.g. "February 18, 2017". Dates seperated with "/" are interpreted as "mm/dd/yyyy". Dates seperated with "-" are interpreted as "dd/mm/yyyy".
Date examples:
05/10/2018 05:00 PM or 10-05-2018 17:00 or 2018/05/10 05:00 PM or 2018-05-10 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 (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).
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 (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).
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 seperate 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 transfered 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 seperate 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 transfered 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">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
- Outlook
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
- Outlook
recurring
<span class="recurring">FREQ=DAILY;COUNT=10</span>
Make the event repeat for a number of times.
Recurring rules are advanced and needs to be tested before you publish it. Generate your recurring rules with tools like TextMagic RRule Generator. Then make sure they work in calendar clients like Outlook and Apple Calendar.
Recurring rules are currently supported by:
- Apple Calendar
- Google Calendar
- Outlook
Please notice: Recurring events in Google Calendar are only supported when using the Google Events API (default method used by AddEvent). If you have opted out using the Google API recurring rules will not work.
If you want multiple events to be supported by all calendar vendors we recommend that you use the subscription calendar.
Make the event repeat for a number of times.
Recurring rules are advanced and needs to be tested before you publish it. Generate your recurring rules with tools like TextMagic RRule Generator. Then make sure they work in calendar clients like Outlook and Apple Calendar.
Recurring rules are currently supported by:
- Apple Calendar
- Google Calendar
- Outlook
Please notice: Recurring events in Google Calendar are only supported when using the Google Events API (default method used by AddEvent). If you have opted out using the Google API recurring rules will not work.
If you want multiple events to be supported by all calendar vendors we recommend that you use the subscription calendar.
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.
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.
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.
Attributes
Parameter
Description
data-direct
<div class="addeventstc" .. 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 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 outlook or outlookcom or yahoo
data-dropdown-x
<div class="addeventstc" .. 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="addeventstc" .. 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="addeventstc" .. 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="addeventstc" .. data-styling="none">
The attribute disables the default CSS.
Accepted value: none
The attribute disables the default CSS.
Accepted value: none
data-google-api
<div class="addeventstc" .. data-google-api="false">
The attribute disables the Google API for adding events to users calendar.
Accepted value: false
AddEvent uses the recommended Events API by Google to insert events into users calendars. Google offers a non-API method - it's undocumented (and deprecated we've heard) but it works. Please notice: If you disable the Events API custom event reminders is not supported.
The attribute disables the Google API for adding events to users calendar.
Accepted value: false
AddEvent uses the recommended Events API by Google to insert events into users calendars. Google offers a non-API method - it's undocumented (and deprecated we've heard) but it works. Please notice: If you disable the Events API custom event reminders is not supported.
Use the advanced settings to change labels in the dropdown and control button behaviour.
<html>
<head>
<!-- AddEvent script -->
<script type="text/javascript" src="https://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>"},
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">05/10/2018 08:00 AM</span>
<span class="end">05/10/2018 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.
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,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.
AddEvent can be customized to look any way you like it. If you find a theme that fits your needs you can download an example below and use it locally. All examples contains sourcecode, stylesheet and images.
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
Event reminders in calendars using .ics files like Outlook, Apple Calendar and Google Calendar.
Recurring events
Recurring events in calendars using .ics files like Outlook, Apple Calendar.
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 100,000,000 events have been added to users calendars using AddEvent.
-
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?
All time zones are available as a JSON list. All time zones.
-
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 Events for newsletters and social sharing. If you are using a MailAPI then please take a look at the Direct URL Method which enables you to create events on-the-fly or attach events in newsletters.