Add-to-Calendar Button v1.3.0

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.

{ "title":"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", "dateStart":"01-14-2022", "dateEnd":"01-18-2022", "timeStart":"10:15", "timeEnd":"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.

{ "title":"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", "dateStart":"01-14-2022", "dateEnd":"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.

{ "label":"Click me to remember!", "title":"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", "dateStart":"01-14-2022", "dateEnd":"01-18-2022", "location":"World Wide Web", "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.

{ "title":"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", "dateStart":"today+2", "dateEnd":"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.

{ "title":"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", "dateStart":"today+2", "dateEnd":"today+4", "location":"World Wide Web", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZone":"Europe/Berlin", "trigger":"click" }

Example 6: Timezone Offset

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

{ "title":"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", "dateStart":"today+2", "dateEnd":"today+4", "timeStart":"10:15", "timeEnd":"23:30", "location":"World Wide Web", "options":[ "Google", "Microsoft365", "Yahoo" ], "timeZoneOffset":"+02:00" }