Back to Documentation

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

1
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.
2
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.
3
Copy the button code and paste it where you want it to appear on your website.
<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.

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

/* 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

Theme: Default button (bigger)

Theme: Modern UI

Theme: Plain Text

Theme: Horizontal Buttons

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.