Documentation "Add to Calendar" button for calendars

Automated "Add to Calendar" button for websites
Automated "Add to Calendar" links for emails
Calendar & Events API v2
Calendar API Deprecated
Events API Deprecated
Useful Tools
- Recurring Rule generator
- Time zone lookup

Add to Calendar button for calendars

Add an “Add to Calendar” button (for subscription calendars) on your website. Use the pre-designed button or use a custom theme to fit your website's design. The “Add to Calendar” button is language independent, and works perfectly in all modern browsers - including tablets and phones.

Example:

Add to Calendar

Install on a website and parameters

Scroll down to the code below and select your calendar in the data-id attribute.
If you haven't created a calendar yet, please create a calendar.

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.

Copy the button code and paste it where you want it to appear on your website.

Example with data

<html>
<head>

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

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14" data-direct="google">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14" data-dropdown-x="right" data-dropdown-y="up">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

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

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

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

/* Some demo styling of the options */
.addeventstc_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);}
.addeventstc_dropdown span em {font-size:12px;color:#ccc;}

/* Remove the AddEvent credits */
.addeventstc_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="addeventstc" data-id="ic14" data-render="inline-buttons">
</div>

</body>
</html>

<html>
<head>

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

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14" data-styling="none">
    Add to Calendar
</div>

</body>
</html>

Attributes

Parameter

Description

data-id

Required

<div class="addeventstc" .. data-id="">

Id of a subscription calendar.

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

Change labels in dropdown

<html>
<head>

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

<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.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="addeventstc" data-id="ic14">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

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

<!--
Or use the AddEvent settings script
-->

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

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.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="addeventstc" data-id="ic14" data-styling="none">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.settings({
        mouse      : true
    });
};
</script>

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14">
    Add to Calendar
</div>

</body>
</html>

<html>
<head>

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

<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.settings({
        dropdown   : {order:"google,appleical,office365,outlook,yahoo,outlookcom"}
    });
};
</script>

</head>
<body>

<!-- Button code -->
<div title="Add to Calendar" class="addeventstc" data-id="ic14">
    Add to Calendar
</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.

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.

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.

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.

Event listeners

Use the event listeners to capture button and dropdown events. Usable for e.g. Google Analytics.

Source

/* Attach events after the button has been loaded */
window.addeventasync = function(){

    /* Capture click on button */
    addeventstc.register('button-click', function(obj){

        /* Log */
        console.log('button-click -> ' + obj.id);

    });

    /* Capture mouseover on button */
    addeventstc.register('button-mouseover', function(obj){

        /* Log */
        console.log('button-mouseover -> ' + obj.id);

    });

    /* Capture mouseout on button */
    addeventstc.register('button-mouseout', function(obj){

        /* Log */
        console.log('button-mouseout -> ' + obj.id);

    });

    /* Capture when dropdown is being displayed */
    addeventstc.register('button-dropdown-show', function(obj){

        /* Log */
        console.log('button-dropdown-show -> ' + obj.id);

    });

    /* Capture when dropdown is being hidden */
    addeventstc.register('button-dropdown-hide', function(obj){

        /* Log */
        console.log('button-dropdown-hide -> ' + obj.id);

    });

    /* Capture when an option in the dropdown is clicked */
    addeventstc.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

Download

Theme: Default button (bigger)

Download

Theme: Modern UI

Download

Theme: Plain Text

Download

Theme: Horizontal Buttons

Download

Product specification

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. Supported by most calendar systems. Notice: Users can opt-out event reminders from external calendars in most calendar systems.

Multiple events

Multiple events are supported. Update/edit/delete existing events. Sync with users calendars.

Daily syncronization

Most calendar systems syncronizes multiple times each day making it possible to change existing events.

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 1 billion calendar synchronizations.

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 addeventstc.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="addeventstc" data-role="none" rel="external">
I'm reloading parts of my website with AJAX, how do I refresh the code?: Call the refresh function addeventstc.refresh(); after your content has been loaded.
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.
.addeventstc {visibility:hidden;}

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.