AddThisEvent is an
Add to Calendar widget

If you are looking for an “Add to Calendar” button for your website, then look no further. AddThisEvent offers an easy, convenient way to create an “Add to Calendar” button. It's easy to use and install.

AddThisEvent was created in Palo Alto, California, May 2012 by
Michael Nilsson and today serves thousands of websites.

Try it out!

AddThisEvent is:

  • Easy to install
  • 100% themable
  • Timezone and DST compatible
  • The leading calendar widget in the world
  • Great support (we will actually help you)

Awesome Internet Superstars and Offline Ninjas use AddThisEvent too

Installing the Widget on your own Website

Step 1:

Copy and paste the code snippet into the bottom of your pages, between the <body> and the </body> tags. If your website uses templates you only need to copy the code into your main template.

<!-- AddThisEvent -->
<script type="text/javascript" src="https://addthisevent.com/libs/1.5.8/ate.min.js"></script>

Step 2:

Select the country / region where the event is located:

00:00, Coordinated Universal Time

Zonecode: 35

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, however I recommend that you at least provide a title of your event as well as dates.

<a href="http://example.com/link-to-your-event" title="Add to Calendar" class="addthisevent">
    Add to Calendar
    <span class="_start">10-05-2014 11:38:46</span>
    <span class="_end">11-05-2014 11:38:46</span>
    <span class="_zonecode">35</span>
    <span class="_summary">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">http://www.facebook.com/events/160427380695693</span>
    <span class="_all_day_event">true</span>
    <span class="_date_format">DD/MM/YYYY</span>
</a>

Optional settings:

Use the optional settings to change labels, settings etc. You must place this extra script after the included script in step 1.

license

Type: string - please buy a license in order to hide the credits.

mouse

Type: boolean - show drop down on mouse over?
Default behaviour is false.

css

Type: boolean - apply default button css?
If value is false the script will not output any CSS.
Enables you to restyle the button css.

outlook

Type: boolean, string - show in drop down menu. Text in drop down menu

google

Type: boolean, string - show in drop down menu. Text in drop down menu

yahoo

Type: boolean, string - show in drop down menu. Text in drop down menu

hotmail

Type: boolean, string - show in drop down menu. Text in drop down menu

ical

Type: boolean, string - show in drop down menu. Text in drop down menu

facebook

Type: boolean, string - show in drop down menu. Text in drop down menu

dropdown

Type: string - (optional). Drop down sortorder. Restricts calendar options.

callback

Type: string - call one or multiple custom functions after the button is clicked.
How to add one or multiple callback functions

<!-- AddThisEvent Settings -->
<script type="text/javascript">
addthisevent.settings({
    license   : "aao8iuet5zp9iqw5sm9z",
    mouse     : false,
    css       : true,
    outlook   : {show:true, text:"Outlook Calendar"},
    google    : {show:true, text:"Google Calendar"},
    yahoo     : {show:true, text:"Yahoo Calendar"},
    hotmail   : {show:true, text:"Hotmail Calendar"},
    ical      : {show:true, text:"iCal Calendar"},
    facebook  : {show:true, text:"Facebook Event"},
    dropdown  : {order:"outlook,google,ical"},
    callback  : ""
});
</script>

Themes

AddThisEvent can be customized to look any way you like it.

We have set up a few examples which you can download as a local copy.

Examples:

Generate “Add to Calendar” links

Static links:

Generate static
“Add to Calendar” links in order to include them in non-javascript media like newsletters and flash.

Please notice:

Headline, start- and end date are mandatory fields.

It's not possible to edit a generated event.

Headline * & description:

300

Location:

Organizer:

Zone code:

Start date: * hh:mm:ss

All day event?

End date: * hh:mm:ss

Timeformat

Important!

When you have generated an "Add to Calendar" link, please make sure all information is correct.

Generated links cannot be edited after being submitted.

License

Non-commercial - Free

If you want to use AddThisEvent for a personal website, your schools website, your personal blog or a non-profit organisation then you do not need to buy a license, just go on and use AddThisEvent.

Commercial usage - buy a license:

The AddThisEvent widget is probably going to save you a day or two of programming, so consider buying a license for your website. When buying a license, the widget becomes unbranded and you support this project to become better.

Please select your license type:

Please enter your details.

License

A single website is defined as a collection of web pages that serve a single entity. So for instance if you have a subdomain defined as widget.example.com and www.example.com we would consider this a single web site. You can have any number of subdomains.

The only exception to this is if you are hosting a web application or websites where the subdomain is providing customer specific data. This would require a "Commercial Multiple Website License".

License

The unlimited permission entitles you to use all future versions of AddThisEvent on all sites you develop in the future, for yourself or your customers, at no further charge. It can also be used for software products that don't compete to AddThisEvent directly.

Frequently Asked Questions

Which date formats can I use?

Use the date format that matches the format of your country. The default format is: DD/MM/YYYY

If you wish to change date format, eg. MM/DD/YYYY please specify it the date format tag:
<span class="_date_format">DD/MM/YYYY</span>

Examples of date strings:
11-05-2014 11:38:46
05/11/2014 11:38:46 AM

Is there a latest version of the javascript file available?

Yes. The path to the latest version of the javascript file is located here: https://addthisevent.com/libs/ate-latest.min.js

How do I handle "All day events"?

By setting the _all_day_event variable to be true the event becomes pre-checked in eg. Microsoft Outlook and Google Calendar.

Please notice: If the variable is set to true time definitions (HH:MM:SS) are ignorred.

I want to style the button and dropdown my self. Which classes do you use?

In order to use your a custom stylesheet you need to modify the settings. Please go to Optional settings, copy / paste the "AddThisEvent Settings" snippet to your website, change the value of "css" to "false". Then you need to download the stylesheet and apply it to your existing stylesheet. The button can now be styled as you prefer.

Is it possible to make the button to a direct link without the dropdown feature?

You can force the button to go directly to only one calendar option by adding a data-direct attribute to the link.

Eg:
<a href="http://example.com/link-to-your-event" class="addthisevent" data-direct="google">

Data-direct options:
outlook, google, yahoo, hotmail, ical

Is it possible to add multiple events?

No. Currently most calendar providers eg. Gmail, Yahoo, Outlook.com do not support adding multiple events.

Using AddThisEvent with jQuery Mobile?

With jQuery Mobile all links are considered to be internal. You must add attributes to the button in order to get it to work.

<a ... class="addthisevent" data-role="none" rel="external">

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

When your document has been loaded, call the function addthisevent.refresh();

How do I call one or multiple functions after the button is clicked.

In order to call one or multiple functions after the button is clicked you need to modify the settings. Please go to Optional settings, copy / paste the "AddThisEvent Settings" snippet to your website. Replace this line callback : "" with your custom callback functions.

Eg: (one function)
callback  :  ['function1()']

Eg: (multiple functions)
callback  :  ['function1()','function2()']

Rename the functions to fit your need.

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.

.addthisevent {visibility:hidden;}

Is it possible to remove items from the drop down or change the text?

Yes! Please go to Optional settings, copy / paste the "AddThisEvent Settings" snippet to your website.

Below properties enables you to remove items from the drop down as well as change the labels.

outlook  : {show:true, text:"Outlook Calendar"}
google   : {show:true, text:"Google Calendar"}
yahoo    : {show:true, text:"Yahoo Calendar"}
hotmail  : {show:true, text:"Hotmail Calendar"}
ical     : {show:true, text:"iCal Calendar"}
facebook : {show:true, text:"Facebook Event"}

Is it possible to track clicks with eg. Google Analytics?

Adding a tracking link to your "Add to Calendar" button is easy. You simply have to add a data-track attribute to the "Add to Calendar" button. Download example.

Eg:
<a href="#" class="addthisevent" data-track="_gaq.push(['_trackEvent','AddThisEvent','click','ate-calendar'])">

The variable "ate-calendar" gets replaced by the type of calendar the user clicks. It is not a mandatory variable.

More information about Google Analytics Event Tracking.

Is it possible to setup an e-mail reminder?

Yes! E-mail reminder is currently supported in clients like Outlook and iCal. Setup a reminder by adding an "_alarm_reminder" variable to the button. The e-mail reminder in this example would be trigged 15 minutes before the event.

<span class="_alarm_reminder">15</span>

Feel free to ask any question

If you need help with your webdevelopment StackOverflow is a great place to ask questions.
If you need our support, please send us an email at support@addthisevent.com