Add-to-Calendar Button v1.8.6

A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.


Get the code at GitHub!


Example 1: The usual One

This is a more or less standard setup with all available calendar types, a custom iCal/ics file name and a time zone set.

<div class="atcb" style="display:none;"> { "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"2022-01-14", "endDate":"2022-01-18", "startTime":"10:15", "endTime":"23:30", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Microsoft365", "MicrosoftTeams", "Outlook.com", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" } </div>

Example 2: Going All-Day

For an all-day event, you would simply leave out the time information.

<div class="atcb" style="display:none;"> { "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:\n→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"2022-01-14", "endDate":"2022-01-18", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" } </div>

Example 3: Customizing Labels

You can customize the button text as well as each option label.
Here, we also used less options and removed the custom iCal/ics name.

<div class="atcb" style="display:none;"> { "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"2022-01-14", "endDate":"2022-01-18", "location":"World Wide Web", "label":"Hit me to remember!", "options":[ "Google|Add to Google Cal", "Microsoft365|Use Microsoft instead", "Yahoo|Yahoo, really?" ], "timeZone":"Europe/Berlin" } </div>

Example 4: Dynamic Dates

Instead of using a fixed date, you can also go with dynamic ones.
Here, the date will also use the current day + 2 days; with the end date 2 days later.

<div class="atcb" style="display:none;"> { "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"today+2", "endDate":"today+4", "location":"World Wide Web", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZone":"Europe/Berlin" } </div>

Example 5: Click Trigger

Per default, the options unfold on hover, when you are on a desktop device.
You can opt for triggering on click, if you want to. Mind that on touch devices, of course, it will be always on tap.
In this example, it is also included with the inline option.

Do it! →
<div class="atcb" style="display:none;"> { "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"today+2", "endDate":"today+4", "location":"World Wide Web", "label":"Click me hard!", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZone":"Europe/Berlin", "inline":true, "trigger":"click" } </div>

Example 6: Timezone Offset

This example uses a timezone offset instead of the TZ name.
This has better compatibility with older browsers, but does not consider things like summer/winter time.
timeZoneOffset will always override timeZone, while not using either of them would default to UTC time.

<div class="atcb" style="display:none;"> { "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"today+2", "endDate":"today+4", "startTime":"10:15", "endTime":"23:30", "location":"World Wide Web", "options":[ "Google", "iCal", "Yahoo" ], "timeZoneOffset":"+02:00" } </div>

Example 7: Schema.org Event Markup

This example holds the event information in a schema.org markup context (requires an additional script tag).
This makes the event readable by bots and can help a little bit with your site's SEO.
Mind that this does not work well with dynamic dates from example #4!
You can use startTime and endTime in the event block, but it is recommended to rather add it to startDate and endDate with "T" as delimiter here.
See the schema.org validator for testing your code - it might highlight some elements outside the event block, which is not problematic.

<div class="atcb"> <script type="application/ld+json"> { "event": { "@context":"https://schema.org", "@type":"Event", "name":"Reminder to check the add-to-calendar-button repo", "description":"Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", "startDate":"2022-01-14T10:15", "endDate":"2022-01-18T23:30", "location":"World Wide Web" }, "options":[ "Apple", "Google", "iCal", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" } </script> </div>

Example 8: Bring-Your-Own Button

If you can't or don't want to use "atcb_init", you can use the "atcb_action" function and apply it to your own button.
For a good look, the element should be at least 160px wide; or remove the second argument to go for a modal dropdown.

<button id="default-button">Add to calendar</button> <script type="application/javascript"> const config = { name: "Reminder to check the add-to-calendar-button repo", description: "Check out the maybe easiest way to include add-to-calendar-buttons to your website at:<br>→ [url]https://github.com/jekuer/add-to-calendar-button[/url]", startDate: "2022-01-14", endDate: "2022-01-18", options: ["Google", "iCal"], timeZone: "Europe/Berlin", trigger: "click", iCalFileName: "Reminder-Event", } const button = document.querySelector('#default-button') button.addEventListener('click', () => atcb_action(config, button)) </script>

Example 9: Bring-Your-Own Anything

When using "atcb_action", you don't need to use a button. A form, a link, an image — whatever element you want to trigger the dropdown, you can use it (though not all of them are good for accessibility).
If you don't provide a second argument, the dropdown list will appear as a modal in the middle of the viewport.
Use of the 'click' trigger is highly recommended here.

<form id="event-form"> <label> Event name: <input name="name" value="Some cool event" /> </label> <input class="atcb_customTrigger" type="submit" value="Save" /> </form> <script type="application/javascript"> document.querySelector('#event-form') .addEventListener('submit', (e) => { e.preventDefault(); atcb_action({ name: e.currentTarget.elements.name.value, startDate: "2022-01-14", endDate: "2022-01-18", options: ["Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "MicrosoftTeams", "Yahoo"], timeZone: "Europe/Berlin", trigger: "click", iCalFileName: "Reminder-Event", }) }) </script>


Get the code at GitHub!