Add This Event instructions
Full installation instructions:
http://addthisevent.com/#install
(this page also allows you to generate a static landing link to include on a newsletter)
- jQuery
Confirm or add the following snippet to the head tags
<script type="text/javascript" src="http://code.a8b.co/js/addthisevent.js" defer="defer"></script>
<script type="text/javascript">addthisevent.settings({ license: "a30d2d5sfz53fffh4mq7" }); </script>
If you want to use a CSS package you also need to suppress the default styling by adding ", css:false" after the license key so that it looks like this:
<script type="text/javascript">addthisevent.settings({ license: "a30d2d5sfz53fffh4mq7", css:false }); </script>
If site has head.js implemented then your head tags will look like this:
<script type="text/javascript">head.load("http://code.a8b.co/js/addthisevent.js");</script>
<script type="text/javascript">head.ready(function(){addthisevent.settings({ license: "a30d2d5sfz53fffh4mq7" }); });</script>
-
Default appearance
Add this HTML snippet where you want your add to calendar link to appear:
<a href="http://example.com/link-to-your-event" title="Add to Calendar" class="addthisevent">Add to Calendar
<span class="_start">DATE TIME</span>
<span class="_end">DATE TIME</span>
<span class="_zonecode">15</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">false</span>
<span class="_date_format">DD/MM/YYYY</span>
</a>
Pick the appropriate zonecode:
3 Hawaii
4 Alaska
6 Pacific
7 Arizona
9 Mountain
11 Central
15 Eastern
16 Indiana
Notes:
Replace the href with ="#" if there's no external link to the event.
DATE = xx-yy-zzzz
TIME = hh:mm:ss (in 24 hour time)
Remove the facebook event if there's no link for it.
Change all_day_event to "true" if it's an all day event.
None of these fields are mandatory, but they'll provide more information into the event calendar if you fill them out.
- Customize Appearance (Optional)
Flag the script with "css : false" per above.
Banner Appearance
Link CSS file in head:
<link rel="stylesheet" type="text/css" href="http://code.a8b.co/addthisevent/banner.css" />
Use slightly different HTML block on the page:
<div class="addthisevent">
<div class="date">
<span class="mon">MON</span>
<span class="day">DAY</span>
<div class="bdr1"></div>
<div class="bdr2"></div>
</div>
<div class="desc">
<p>
<strong class="hed">EVENT TITLE</strong>
<span class="des">Location: LOCATION<br />
When: TIME - TIME</span>
</p>
</div>
<span class="_start">DATE TIME</span>
<span class="_end">DATE TIME</span>
<span class="_zonecode">15</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="_all_day_event">false</span>
<span class="_date_format">MM/DD/YYYY</span>
</div>
Modern Appearance
Link CSS file in head:
<link rel="stylesheet" type="text/css" href="http://code.a8b.co/addthisevent/modern.css" />
Use the default entry, but add the arrow above the <span class="_start">
<span class="arrow"> </span>
Plain Text Appearance
Link CSS file in head:
<link rel="stylesheet" type="text/css" href="http://code.a8b.co/addthisevent/plain-text.css" />
Use the default entry.
Icon Appearance
Link CSS file in head:
<link rel="stylesheet" type="text/css" href="http://code.a8b.co/addthisevent/icon.css" />
Use the default entry.
Remove the "Add to Calendar" display portion of the <a> tag.