Add to Calendar  (for one-time events)

This section enables you to easily set up an “Add to Calendar” button for one-time events on your website. 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 and is timezone and DST compatible.

Example:

Add to Calendar 08/04/2017 09:00 AM 08/04/2017 11:00 AM America/New_York Summary of the event Description of the event Location of the event Organizer Organizer e-mail false MM/DD/YYYY

Recommended usage:
Websites

"Add to Calendar" button for newsletters?
If you are looking for an "Add to Calendar" button (for one-time events) for your newsletters please go to One-time events.

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/atc/1.6.1/atc.min.js" async defer></script>

Step 2:

Select the country / region where the event is located:

Lookup

Time zone lookup

Enter a country, capital or address in the search field to lookup the TZID (time zone id).

Suggestions

Your search did not return any results.

Step 3:

Copy and paste the code snippet into your page any place. You can add as many links on your website as you prefer.
All link properties are not mandatory, take a look in the Parameters section.

<div title="Add to Calendar" class="addeventatc">
    Add to Calendar
    <span class="start">08/04/2017 09:00 AM</span>
    <span class="end">08/04/2017 11:00 AM</span>
    <span class="timezone">Europe/Paris</span>
    <span class="title">Summary of the event</span>
    <span class="description">Description of the event<br>Example of a new line</span>
    <span class="location">Location of the event</span>
    <span class="organizer">Organizer</span>
    <span class="organizer_email">Organizer e-mail</span>
    <span class="facebook_event">https://www.facebook.com/events/703782616363133</span>
    <span class="all_day_event">false</span>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="client"></span>
</div>
<div title="Add to Calendar" class="addeventatc">
    Add to Calendar
    <span class="start">08/04/2017 08:00 AM</span>
    <span class="end">08/04/2017 10:00 AM</span>
    <span class="timezone">Europe/Paris</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>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="client"></span>
</div>
<div title="Add to Calendar" class="addeventatc">
    Add to Calendar
    <span class="start">08/04/2017 16:00</span>
    <span class="end">08/04/2017 18:00</span>
    <span class="timezone">Europe/Paris</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>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="client"></span>
</div>
<div title="Add to Calendar" class="addeventatc">
    Add to Calendar
    <span class="start">08/04/2017 09:00 AM</span>
    <span class="end">08/04/2017 11:00 AM</span>
    <span class="timezone">Europe/Paris</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>
    <span class="organizer">Organizer</span>
    <span class="organizer_email">Organizer e-mail</span>
    <span class="facebook_event">https://www.facebook.com/events/703782616363133</span>
    <span class="all_day_event">true</span>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="alarm_reminder">15</span>
    <span class="recurring">FREQ=DAILY;COUNT=10</span>
    <span class="calname">Custom event filename</span>
    <span class="uid">event123</span>
    <span class="status">confirmed</span>
    <span class="client"></span>
    <span class="method">REQUEST</span>
</div>
<div title="Add to Calendar" data-dropdown-x="left/right/auto" data-dropdown-y="up/down/auto">
    Add to Calendar
    <span class="start">08/04/2017 16:00</span>
    <span class="end">08/04/2017 18:00</span>
    <span class="timezone">Europe/Paris</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>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="client"></span>
</div>
<div title="Add to Calendar" data-render="inline-buttons">
    Add to Calendar
    <span class="start">08/04/2017 16:00</span>
    <span class="end">08/04/2017 18:00</span>
    <span class="timezone">Europe/Paris</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>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="client"></span>
</div>
<div title="Add to Calendar" class="addeventatc" data-direct="google">
    Add to Calendar
    <span class="start">08/04/2017 09:00 AM</span>
    <span class="end">08/04/2017 11:00 AM</span>
    <span class="timezone">Europe/Paris</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>
    <span class="date_format">MM/DD/YYYY</span>
    <span class="client"></span>
</div>

Parameters

Parameter Value Description
start Required Event start date. Mandatory. Format: "MM/DD/YYYY" or "DD/MM/YYYY". Date must contain numeric values only. Time can be in either 12-hour clock or 24-hour clock format. Eg. "08/04/2017 03:00 PM" or "08/04/2017 15:00".
end Required Event end date. Mandatory. Format: "MM/DD/YYYY" or "DD/MM/YYYY". Date must contain numeric values only. Time can be in either 12-hour clock or 24-hour clock format. Eg. "08/04/2017 05:00 PM" or "08/04/2017 17:00".
timezone   Timezone of the event, eg. "Europe/Paris". If timezone is applied (recommended), date / time will be converted to Zulu time / UTC. If timezone is not applied, date / time will be parsed as is.
title Required Title of the event. Mandatory.
description   Description of the event. Maximum 500 characters recommended.
location   Event location, eg. "Eiffel Tower, Paris".
organizer   Event organizer, eg. "John Johnson".
organizer_email   Event organizer e-mail, eg. "your@email.com".
facebook_event   Link to event on Facebook, eg. https://www.facebook.com/events/703782616363133
all_day_event   All day event, eg "true" or "false".
date_format Required Format of the date in "start" and "end", eg "MM/DD/YYYY". Values can be "MM/DD/YYYY" or "DD/MM/YYYY". If "date_format" is not specified, the default format "MM/DD/YYYY" will be applied. Mandatory.
alarm_reminder   Requires number of minutes, eg. 60.

Supported in clients like Outlook and Apple Calendar. Trigger eg. reminder "15" minutes before event or one day before event : 60 x 24 = "1440".
recurring   Requires a recurring rule, eg. "FREQ=DAILY;COUNT=10"

Supported in clients like Outlook and Apple Calendar.

There are a lot of recurrence rules you can apply. If you set up an invalid rule clients like Outlook and Calendar throw an error. You are adviced to test your rule by adding it to AddEvent, then test it with Outlook and similar clients.
This website has many great examples: http://www.kanzaki.com/docs/ical/rrule.html
calname   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   Define your own UID for the event. If not specified, a system UID will be generated. Please notice; Yahoo Calendar reports error 404 if an UID is defined. We therefore don't include UID's in Yahoo Calendar.
status   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, the system defaults to "CONFIRMED".
client   User account client id. If defined domains on which the button appears will be created automatically under the accounts domains.
method   If specified a method parameter is added in the .ics file used for e.g. Outlook and Apple Calendar. If not specified, no method parameter is added. No methods are defined by this specification. http://www.kanzaki.com/docs/ical/method.html + https://tools.ietf.org/html/rfc2446

Examples of usage:
"PUBLISH", "REQUEST", "CANCEL", "REFRESH".

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(){
    addeventatc.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"},
        facebook   : {show:true, text:"Facebook Event"},
        dropdown   : {order:"outlook,google,appleical"}
    });
};
</script>
<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventatc.settings({
        license    : ""
    });
};
</script>
<!-- AddEvent Settings -->
<script type="text/javascript">
window.addeventasync = function(){
    addeventatc.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.
facebook Variable: {show:true,text:"Facebook Event"}
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 are 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(){
    addeventatc.register('button-click', function(obj){

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

    });
};

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

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

    });
};

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

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

    });
};

// Capture when drop down is being displayed
window.addeventasync = function(){
    addeventatc.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(){
    addeventatc.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(){
    addeventatc.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.

 Hi !

Thank you for joining AddEvent!
AddEvent is trusted by the biggest companies in the world and is used by millions of users from San Francisco to Sydney. Our services are highly maintained and we're proud to be the leading calendar widget on the Internet.

Premium Trial
We have upgraded your account to Premium for a 14 day period. If our services are useful to your organization, please upgrade your account to Premium.

We are building AddEvent with our customers
We listen and develop the functionality on AddEvent with- and for our customers. Don't hesitate to contact us if you have questions or requests.

Close Window

Please notice! We will keep you informed if anything "out of the ordinary" happens, otherwise we will leave you alone to do your business.