Add-to-Calendar Button v1.4.1

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.

{ "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: https://github.com/jekuer/add-to-calendar-button", "startDate":"01-14-2022", "endDate":"01-18-2022", "startTime":"10:15", "endTime":"23:30", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" }

Example 2: Going All-Day

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

{ "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: https://github.com/jekuer/add-to-calendar-button", "startDate":"01-14-2022", "endDate":"01-18-2022", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" }

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.

{ "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: https://github.com/jekuer/add-to-calendar-button", "startDate":"01-14-2022", "endDate":"01-18-2022", "location":"World Wide Web", "label":"Click me to remember!", "options":[ "Google|Add to Google Calendar", "Microsoft365|Use Microsoft instead", "Yahoo|Yahoo, really?" ], "timeZone":"Europe/Berlin" }

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.

{ "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: https://github.com/jekuer/add-to-calendar-button", "startDate":"today+2", "endDate":"today+4", "location":"World Wide Web", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZone":"Europe/Berlin" }

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.

{ "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: https://github.com/jekuer/add-to-calendar-button", "startDate":"today+2", "endDate":"today+4", "location":"World Wide Web", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZone":"Europe/Berlin", "trigger":"click" }

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.

{ "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: https://github.com/jekuer/add-to-calendar-button", "startDate":"today+2", "endDate":"today+4", "startTime":"10:15", "endTime":"23:30", "location":"World Wide Web", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZoneOffset":"+02:00" }

Example 7: Schema.org Event Markup

Last but not least, an example, which 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.

<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: https://github.com/jekuer/add-to-calendar-button", "startDate":"01-14-2022T10:15", "endDate":"01-18-2022T23:30", "location":"World Wide Web" }, "options":[ "Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "Yahoo" ], "timeZone":"Europe/Berlin", "iCalFileName":"Reminder-Event" } </script>