Add to Calendar  (for multiple-time events)

This section enables you to easily set up an “Add to Calendar” button for multiple events on your website. Use this functionality to let your users add a series of events to their calendar. Use our predesigned button or use one of the custom themes to fit your website's design.

The “Add to Calendar” button is language independent and can be customized to fit your website's language.

It works perfectly in all modern browsers including tablets and phones.

Example:

Add to Calendar

Recommended usage:
Websites

"Add to Calendar" button for newsletters?
If you are looking for an "Add to Calendar" button (for multiple events) for your newsletters please go to Multiple Events and create a calendar.

Install

Step 1:

Copy and paste the code snippet into the top of your pages, between the <head> and the </head> tags. If your website uses templates you only need to copy the code into your main template. If you use WordPress, we recommend that you add the script before the end of the </body> tag.

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

Step 2:

Select a calendar:

If you have not created a calendar yet, please go to
Multiple Events.

Step 3:

Copy and paste the code snippet into your page any place.

<!-- Add to Calendar button (multiple events) -->
<div title="Add to Calendar" class="addeventstc" data-id="">
    Add to Calendar
</div>


<!-- Add to Calendar button (multiple events) -->
<div title="Add to Calendar" class="addeventstc" data-id="" data-direct="google">
    Add to Calendar
</div>


<!-- Add to Calendar button (multiple events) -->
<div title="Add to Calendar" class="addeventstc" data-id="" data-dropdown-x="left/right/auto" data-dropdown-y="up/down/auto">
    Add to Calendar
</div>


<!-- Add to Calendar button (multiple events) -->
<div title="Add to Calendar" class="addeventstc" data-id="" data-render="inline-buttons">
    Add to Calendar
</div>


Advanced settings

Use the advanced settings to change labels, settings etc. You must place this extra script after the included script
in “Install” → “Step 1”.

<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.settings({
        license    : "",
        mouse      : false,
        css        : true,
        outlook    : {show:true, text:"Outlook"},
        google     : {show:true, text:"Google <em>(online)</em>"},
        yahoo      : {show:true, text:"Yahoo <em>(online)</em>"},
        outlookcom : {show:true, text:"Outlook.com <em>(online)</em>"},
        appleical  : {show:true, text:"Apple Calendar"},
        dropdown   : {order:"outlook,google,appleical"}
    });
};
</script>
<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.settings({
        license    : ""
    });
};
</script>
<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventstc.settings({
        license    : "",
        css        : false
    });
};
</script>

Parameters

Parameter Description
license User account license number. Removes the "AddEvent" branding
from button dropdown. A valid license number is provided with your Premium Membership.
mouse Show options dropdown on mouseover. Accepts "true" or "false". Default is "false".
css Use AddEvent default CSS. Removes default button CSS if set to "false". Accepts "true" or "false". Default is "true".
outlook Variable: {show:true,text:"Outlook"}
Variable #1: Show option in dropdown. Default is "true".
Variable #2: Custom text in dropdown.
google Variable: {show:true,text:"Google <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is "true".
Variable #2: Custom text in dropdown.
yahoo Variable: {show:true,text:"Yahoo <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is "true".
Variable #2: Custom text in dropdown.
outlookcom Variable: {show:true,text:"Outlook.com <em>(online)</em>"}
Variable #1: Show option in dropdown. Default is "true".
Variable #2: Custom text in dropdown.
outlook Variable: {show:true,text:"Outlook"}
Variable #1: Show option in dropdown. Default is "true".
Variable #2: Custom text in dropdown.
appleical Variable: {show:true,text:"Apple Calendar"}
Variable #1: Show option in dropdown. Default is "true".
Variable #2: Custom text in dropdown.
dropdown Sort order of the items in the dropdown. Please notice: If any items is defined, only these items will be displayed in the dropdown.

Event listeners

Use the event listeners to capture button and drop down events. Usable for e.g. Google Analytics.
You must place any of the event listeners after the included script in “The Button” → “Step 1”.

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

        // Console log example
        console.log('button-click -> ' + obj.id);

    });
};

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

        // Console log example
        console.log('button-mouseover -> ' + obj.id);

    });
};

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

        // Console log example
        console.log('button-mouseout -> ' + obj.id);

    });
};

// Capture when drop down is being displayed
window.addeventasync = function(){
    addeventstc.register('button-dropdown-show', function(obj){

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

    });
};

// Capture when drop down is being hidden
window.addeventasync = function(){
    addeventstc.register('button-dropdown-hide', function(obj){

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

    });
};

// Capture when an option in the drop down is clicked
window.addeventasync = function(){
    addeventstc.register('button-dropdown-click', function(obj){

        // Console log example
        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', 'AddToCalendar', '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 drop down was displayed.
button-dropdown-hide Returns the object->id of the button when the drop down was hidden.
button-dropdown-click Returns the object->id + object->service when an option in the drop down 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. All examples contains sourcecode, custom stylesheet and images.

Add to Calendar

Theme: Default button (slightly rounded corners)

Download

Add to Calendar  

Theme: Modern UI

Download

Add to Calendar

Theme: Plain Text

Download

Add to Calendar

Theme: Default button (straight borders, bigger)

Download

Theme: Horizontal Buttons

Download