Load the respective script by adding the following script tag to the <head> section of your website.
The script will be loaded in a non-blocking way. So you don't need to worry about where to include it exactly.
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>Start using it by adding a <add-to-calendar-button> tag to your HTML source code - with the options as attributes.
Yes, it is that simple.
Your code block could look like the following:
<add-to-calendar-button
name="Title"
options="'Apple','Google'"
location="World Wide Web"
startDate="2023-05-20"
endDate="2023-05-20"
startTime="10:15"
endTime="23:30"
timeZone="America/Los_Angeles"
></add-to-calendar-button>Check out the "Configuration" page for all available options and customization.
Start configuringOr explore more specific examples.
Start exploringYou are using Angular, React, Vue, or other frameworks?
Check out the "Installation" section!
We have strong guides and solutions for all big frontend stacks as well things like WordPress.
Find complete project examples per stack at Stackblitz: Click here .