Menu

more_horiz

“Add to Calendar” button

“Add to Calendar” links for your newsletters and social media? 🤩 It's super easy to enter your info and generate event links using our Dashboard! For email links, check out this how-to guide using MailChimp (it can be used with any newsletter vendor).

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 08/15/2021 08:00 AM 08/15/2021 10:00 AM America/Los_Angeles Summary of the event Description of the event Location of the event MM/DD/YYYY USER-CLIENT-ID

Please notice This button is for singular events.
We also have an “Add to Calendar” button (for calendars).

face

Install on a website, parameters and attributes

1
Copy and paste the script in the <head> section into your websites head section.
2
Copy the button code and paste it where you want it to appear on your website.
3
Add the domain where you use the button in the domains section.
label
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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">15-08-2021 08:00</span>
									    <span class="end">15-08-2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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

<span class="start">08/15/2021 03:00 PM</span>

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

Use numeric values to describe the date, e.g. "08/15/2021" and not textual, e.g. "August 15th, 2021".

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:
08/15/2021 03:00 PM or 15-08-2021 15:00 or 2021/08/15 03:00 PM or 2021-08-15 15:00
end
<span class="end">08/15/2021 05:00 PM</span>

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

Use numeric values to describe the date, e.g. "08/15/2021" and not textual, e.g. "August 15th, 2021".

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:
08/15/2021 05:00 PM or 15-08-2021 17:00 or 2021/08/15 05:00 PM or 2021-08-15 17:00

If end is not defined, the end date is automatically set to start date plus one hour.
timezone
<span class="timezone">Europe/Paris</span>

The events time zone, e.g. Europe/Paris or America/Los_Angeles.

If timezone is applied (highly 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).

** Please notice: We're currently using the Microsoft Events API for inserting events into Outlook.com and Office 365. Those options does not allow fluid time and a timezone is required.

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

<span class="title">Title of event</span>

Title of the event. Single line string.
description
<span class="description">Description of event</span>

Description of the event. Use <br> 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
<span class="location">Eiffel Tower</span>

Event location, e.g. "Eiffel Tower, Paris".
organizer
<span class="organizer">John Johnson</span>

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
<span class="organizer_email">john@example.com</span>

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
<span class="facebook_event">https://www.facebook.com/events/...</span>

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
<span class="all_day_event">true</span>

All day event. Accepts true or false.
date_format
<span class="date_format">MM/DD/YYYY</span>

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
<span class="alarm_reminder">15</span>

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 (using Google Events API)
- Outlook
- Outlook.com (using Microsoft Events API)
recurring
<span class="recurring">FREQ=DAILY;INTERVAL=2;COUNT=5</span>

Make the event repeat for a number of times.

Generate Recurring Rulebuild

Please notice: The start date/time must match the recurrence rule in order to work in strict calendar systems like Outlook and Apple Calendar.

Recurring rules are currently supported by:
- Apple Calendar
- Google Calendar (using "Direct" and Google Events API)
- Office 365 (using the Microsoft Events API)
- Outlook
- Outlook.com (using Microsoft Events API)
calname
<span class="calname">use-title</span>

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
<span class="attendees">joe@example.com</span>

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:
<span class="attendees">joe@example.com,jack@example.com</span>
uid
<span class="uid">my-unique-id123@addevent.com</span>

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
<span class="sequence">3</span>

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
<span class="status">CONFIRMED</span>

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
<span class="client">USER-CLIENT-ID</span>

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
<span class="method">PUBLISH</span>

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
<span class="transp">TRANSPARENT</span>

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 office365 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="true">

The attribute enables the Google Events API for adding events to users calendar.
Accepted value: true

AddEvent uses Google's "Direct" non-API method to add events to Google Calendar by default. This method offers a great user experience but has limitations in what can be controlled from our side (e.g. custom reminders are not supported). 

AddEvent also supports the recommended Google Events API to insert events into user's calendars. In order to use the Google Events API simply add the data-attribute to your button code and set the value to "true".
data-outlook-api
<div class="addeventatc" .. data-outlook-api="true">

The attribute enables the Microsoft Events API for adding events to users calendar.
Accepted value: true

AddEvent uses Microsoft's "Direct" non-API method to add events to Microsoft (online) Calendars by default. This method offers a great user experience but has limitations in what can be controlled from our side (e.g. custom reminders and recurring rules are not supported). 

AddEvent also supports the recommended Microsoft Events API to insert events into user's calendars. In order to use the Microsoft Events API simply add the data-attribute to your button code and set the value to "true".

Advanced settings

Use the advanced settings to change labels in the dropdown and control button behaviour.

label
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>"},
									        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="addeventatc">
									    Add to Calendar
									    <span class="start">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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,office365,outlook,yahoo,outlookcom"}
									    });
									};
									</script>

									</head>
									<body>

									<!-- Button code -->
									<div title="Add to Calendar" class="addeventatc">
									    Add to Calendar
									    <span class="start">08/15/2021 08:00 AM</span>
									    <span class="end">08/15/2021 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 <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.
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,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.

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

label

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

label
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 300,000,000 events have been added to users calendars using AddEvent.

Questions and answers
label

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 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 the Dashboard to create events. If you are using a Mail API 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.

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.

close

We've launched
a new service!

AppointmentThing is a simple yet powerful scheduling tool that makes it easy for your clients to schedule appointments with you, saving time for everyone. 😃

Check it out
Don't show again
More menu

Products

Company

Resources

Carefully crafted by your friends at © 2021 AddEvent Inc