Menu
more_horiz“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
Example:
Please notice
This button is for singular events.
We also have an “Add to Calendar” button (for calendars).
Install on a website, parameters and attributes
<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/20/2020 08:00 AM</span>
<span class="end">04/20/2020 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>
Use the advanced settings to change labels in the dropdown and control button behaviour.
<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">04/20/2020 08:00 AM</span>
<span class="end">04/20/2020 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
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 */
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
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.
Below you'll find some of the most asked questions.
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.
