Add to Calendar button

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.

The "Add to Calendar" button for events on websites and calendars is easy to install, language independent, time zone and DST compatible. It works perfectly in all modern browsers, tablets and mobile devices, and with Apple Calendar, Google Calendar, Outlook, Outlook.com and Yahoo Calendar.

Example:

Add to Calendar 03/04/2019 08:00 AM 03/04/2019 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

Copy and paste the script in the <head> section into your websites head section.

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

Add the domain where you use the button in the domains section.

Example with 12-hour clock

<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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">04-03-2019 08:00</span>
									    <span class="end">04-03-2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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

03/04/2019 03:00 PM

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

Use numeric values to describe the date, e.g. "03/04/2019" and not textual, e.g. "March 4th, 2019".

Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d. To avoid potential ambiguity, it's best to use ISO 8601 (YYYY-MM-DD) dates

Date examples:
03/04/2019 03:00 PM or 04-03-2019 15:00 or 2019/03/04 03:00 PM or 2019-03-04 15:00

end

03/04/2019 05:00 PM

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

Use numeric values to describe the date, e.g. "03/04/2019" and not textual, e.g. "March 4th, 2019".

Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: if the separator is a slash (/), then the American m/d/y is assumed; whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d. To avoid potential ambiguity, it's best to use ISO 8601 (YYYY-MM-DD) dates

Date examples:
03/04/2019 05:00 PM or 04-03-2019 17:00 or 2019/03/04 05:00 PM or 2019-03-04 17:00

If end is not defined, the end date is automatically set to start date plus one hour.

timezone

Europe/Paris

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

Title of event

Title of the event. Single line string.

description

Description of event

Description of the event. Use to separate 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 transferred 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

Eiffel Tower

Event location, e.g. "Eiffel Tower, Paris".

organizer

John Johnson

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

john@example.com

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

https://www.facebook.com/events/...

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

true

All day event. Accepts true or false.

date_format

MM/DD/YYYY

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

15

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
- Outlook.com
- Yahoo

recurring

FREQ=DAILY;INTERVAL=1;COUNT=5

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
- Google Calendar
- Outlook
- Outlook.com

Please notice: Recurring events in Google Calendar + Outlook.com are only supported when using the Google Events API + Outlook.com Events API (default method used by AddEvent). If you have opted out using the Google API or Outlook.com API recurring rules will not work.

If you want multiple events to be supported by all calendar vendors we recommend that you use the subscription calendar.

calname

use-title

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.

attendees

joe@example.com

Add one or multiple attendees (pre-populated) to the event. Enables the pre-populated attendee(s) to get a response from the attendee. Separate multiple attendees (email addresses) with a comma.

Example:
joe@example.com,jack@example.com

uid

my-unique-id123@addevent.com

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.

sequence

3

Sequence is the number of times your event has been changed/updated and should be used in combination with an UID.

Warning. Use this option only if it serves a purpose in your coding.

status

CONFIRMED

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

USER-CLIENT-ID

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

PUBLISH

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.

transp

TRANSPARENT

Determines whether the event appears as "free" or "busy" on the users calendar. Default value is OPAQUE (busy).

Accepted values:
TRANSPARENT or OPAQUE.

Attributes

Parameter

Description

data-direct

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

Control the horizontal position of the dropdown.
Accepted values: left or right or auto

data-dropdown-y

<div class="addeventatc" .. data-dropdown-y="up">

Control the vertical position of the dropdown.
Accepted values: up or down or auto

data-render

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

The attribute disables the default CSS.
Accepted value: none

data-intel

<div class="addeventatc" .. data-intel="false">

If we can detect which device the user is on (e.g. an iDevice) it makes sense to automatically select the "Apple" option on click instead of showing the dropdown option. The behavior can be disabled by setting "data-intel" to "false".

Accepts: true or false. Default is true.

data-google-api

<div class="addeventatc" .. data-google-api="false">

The attribute disables the Google API for adding events to users calendar.
Accepted value: false

AddEvent uses the recommended Events API by Google to insert events into users calendars. Google offers a non-API method - it's undocumented (and deprecated we've heard) but it works. Please notice: If you disable the Events API custom event reminders and recurring rules are not supported.

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://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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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">03/04/2019 08:00 AM</span>
									    <span class="end">03/04/2019 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 (online)"}

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 (online)"}

Variable #1: Show option in dropdown. Default is true.
Variable #2: Custom text in dropdown.

yahoo

yahoo : {show:true, text:"Yahoo (online)"}

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.

Source

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

Download

Theme: Default button (bigger)

Download

Theme: Date Banner

Download

Theme: Modern UI

Download

Theme: Horizontal Buttons

Download

Theme: Plain Text

Download

Theme: Icon

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

Custom event reminders in Apple, Google, Outlook and Outlook.com.

Recurring events

Custom recurring events in Apple, Google, Outlook and Outlook.com.

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();. Depending on how your code is structured, you might want to wrap the refresh function inside a timed function, e.g. setTimeout(function(){addeventatc.refresh();}, 200);
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.
Is it possible to change the language in the button and drop down?

Absolutely. Simply change the text in the button by replacing the text "Add to Calendar". On this page, The "Add to Calendar" in your native language you can find the phrase "Add to Calendar" translated into other languages. In order to change the text in the drop down, please review the "Advanced settings" section on this page.

Add to Calendar button (for websites)

The "Add to Calendar" button for events on websites and calendars is easy to install, language independent, time zone and DST compatible. It works perfectly in all modern browsers, tablets and mobile devices, and with Apple Calendar, Google Calendar, Outlook, Outlook.com and Yahoo Calendar.

The button doesn't work in Angular

Using AddEvent with jQuery Mobile?

I'm reloading parts of my website with AJAX, how do I refresh the code?

Where is the "old" time zones located? (Used by e.g. LeadPages)

Do you have a list containing all of the time zones?

Is there a way to prevent the brief "flash" of unstyled content before the button styling gets applied?

Can I use the "Add to Calendar" button in newsletters?

Is it possible to change the language in the button and drop down?