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

They will simply click the button, choose their desired calendar, and presto - your event is on their calendar! (Which, by the way, users view 12 times/day on average..). We make it easy for you to make it easy for your users, and more of your events on their calendars result in increased attendance to those events, which means good things for your company.

Easy to install, language independent, time zone and DST compatible. Works perfectly in all modern browsers, tablets and mobile devices.

Example:

Add to Calendar 11/01/2017 08:00 AM 11/01/2017 10:00 AM America/Los_Angeles Summary of the event Description of the event Location of the event MM/DD/YYYY USER-CLIENT-ID

Install on website

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.
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">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<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">01-11-2017 08:00</span>
									    <span class="end">01-11-2017 10:00</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>
									
<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" data-direct="google">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<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" data-dropdown-x="right" data-dropdown-y="up">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<html>
									<head>

									<!-- AddEvent script -->
									<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

									<!-- Demo style setup -->
									<style type="text/css">

									/* Hide button at load */
									.addeventatc {visibility:hidden;}

									/* Make sure the options layer / dropdown is always visible */
									.addeventatc_dropdown {display:block!important;}

									/* Some demo styling of the options */
									.addeventatc_dropdown span {display:inline-block;margin:2px;padding:0px 8px;background:#666;color:#fff;border-radius:4px;cursor:pointer;font:14px/30px Roboto,serif;box-shadow:1px 1px 5px 0px rgba(0,0,0,0.3);}
									.addeventatc_dropdown span em {font-size:12px;color:#ccc;}

									/* Remove the AddEvent credits */
									.addeventatc_dropdown .copyx {display:none;}

									</style>

									</head>
									<body>

									<!--
									The attribute data-display="inline-button" ensures 
									that the options are generated and displayed at load.

									We have removed the "Add to Calendar" text from the button and added 
									some additional styles in the stylesheet.
									-->

									<!-- Button code -->
									<div title="Add to Calendar" class="addeventatc" data-render="inline-buttons">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<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" data-styling="none">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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">11/01/2017 03:00 PM</span>

Start date of the event. Accepts most date/time formats, e.g. 11/01/2017 03:00 PM (12-hour format) or 01-11-2017 15:00 (24-hour format).

Use numeric date values, e.g. "11/01/2017" and not textual, e.g. "November 1st, 2017". Dates seperated with "/" are interpreted as "mm/dd/yyyy". Dates seperated with "-" are interpreted as "dd/mm/yyyy".

Date examples:
11/01/2017 03:00 PM or 01-11-2017 15:00 or 2017/11/01 03:00 PM or 2017-11-01 15:00
end
<span class="end">11/01/2017 05:00 PM</span>

End date of the event. Accepts most date/time formats, e.g. 11/01/2017 05:00 PM (12-hour format) or 01-11-2017 17:00 (24-hour format).

Use numeric date values, e.g. "11/01/2017" 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:
11/01/2017 05:00 PM or 01-11-2017 17:00 or 2017/11/01 05:00 PM or 2017-11-01 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.
title
Required

<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.
location
<span class="location">Eiffel Tower</span>

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".
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".
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.
all_day_event
<span class="all_day_event">true</span>

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).
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
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
- Outlook

We recommend that you use the subscription calendar if you want your multiple events to be supported by all calendar clients.
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.
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.
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.
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.
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.

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
data-dropdown-x
<div class="addeventstc" .. data-dropdown-x="left">

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
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
data-styling
<div class="addeventstc" .. data-styling="none">

The attribute disables the default CSS.
Accepted value: none

Advanced settings

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">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<html>
									<head>

									<!-- AddEvent script -->
									<script type="text/javascript" src="https://addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

									<!-- Remove "AddEvent" from the dropdown with the following CSS -->
									<style type="text/css">
									.addeventatc_dropdown {padding:6px 0px;}
									.addeventatc_dropdown .copyx {display:none;}
									</style>
									
									<!-- 
									Or use the AddEvent settings script
									-->

									<!-- AddEvent Settings -->
									<script type="text/javascript">
									window.addeventasync = function(){
									    addeventatc.settings({
									        license : "USER-CLIENT-ID"
									    });
									};
									</script>

									</head>
									<body>

									<!-- Button code -->
									<div title="Add to Calendar" class="addeventatc">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<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({
									        css        : false
									    });
									};
									</script>

									<!-- 
									Or apply the data-styling="none" attribute 
									to the button code 
									-->

									</head>
									<body>

									<!-- Button code -->
									<div title="Add to Calendar" class="addeventatc" data-styling="none">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<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({
									        mouse      : true
									    });
									};
									</script>

									</head>
									<body>

									<!-- Button code -->
									<div title="Add to Calendar" class="addeventatc">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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>
									
<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({
									        dropdown   : {order:"google,appleical,outlook,yahoo,outlookcom"}
									    });
									};
									</script>

									</head>
									<body>

									<!-- Button code -->
									<div title="Add to Calendar" class="addeventatc">
									    Add to Calendar
									    <span class="start">11/01/2017 08:00 AM</span>
									    <span class="end">11/01/2017 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").
mouse
mouse : true

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.
appleical
appleical : {show:true, text:"Apple"}

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.
outlook
outlook : {show:true, text:"Outlook"}

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.
yahoo
yahoo : {show:true, text:"Yahoo <em>(online)</em>"}

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.
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.

Event listeners

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.

Themes

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.

Theme: Default button

Theme: Default button (bigger)

Theme: Date Banner

Theme: Modern UI

Theme: Horizontal Buttons

Theme: Plain Text

Theme: Icon

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.

FAQ

  • 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();.

  • 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.