Examples

The following examples are demonstrating the most interesting functionality.
We recommend you to play with the demo to experience all variations.

The buttons on this share some parameters. They all have the same dates (except the dynamic one), the default style, and adapt to the lightMode of the website.

For more advanced expert cases, have a look at the "Advanced Usage" page.

Example 1: The usual one

This is a more or less standard setup with all available calendar types and a time zone set.

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams','Yahoo'"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 2: All-Day Event

For an all-day event, you would simply leave out the time information.
You can even omit the time zone information here.

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams','Yahoo'"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 3: Dynamic Dates

Instead of using a fixed date, you can also go with dynamic ones.

You can use "today" to always use the respective current day.
Adding a number like "+7" after the date string (e.g. "2025-04-18+7") would add 7 days. In the example, we are combining this to make the event always be 2 days from today.

Btw: This example also generates online-event-rich-schema in the background, since the location is a URL.

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="today+2"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  location="https://add-to-calendar-button.com"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 4: Recurring Event

You can define recurring events by setting an RRULE .
Mind that the rule needs to be valid (technically and logically) and that it is not supported by all calendar types - in this example, the specified Yahoo and Outlook.com (and Google, if you're on iOS) options won't show up for that reason. 

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  recurrence="RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=6"
  lightMode="bodyScheme"
></add-to-calendar-button>

You can also specify the rule in more simple terms.
Check the "Configuration" page for more details on that. 

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  recurrence="weekly"
  recurrence_interval="1"
  recurrence_count="6"
  recurrence_byDay="WE,FR"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 5: Multi-Date Event

Events can also have multiple dates, which are not recurring.
For example a workshop consisting of 2 parts.

You define those parts by placing them as separate objects in a dates array.
Individual date and time information would be required - global ones will be ignored.
Events get automatically sorted based on their startDate.
You can omit the starting '[' and ending ']', if necessary (e.g. when using the WordPress Shortcode). 

<add-to-calendar-button
  name="Event Series"
  dates='[
    {
      "name":"Reminder 1/3 to test the Add to Calendar Button",
      "description":"This is the first part to check the Add to Calendar Button script at [url]https://add-to-calendar-button.com/[/url]",
      "startDate":"today+3",
      "startTime":"10:15",
      "endTime":"23:30"
    },
    {
      "name":"Reminder 3/3 to test the Add to Calendar Button",
      "description":"This is the third part to check the Add to Calendar Button script at [url]https://add-to-calendar-button.com/[/url]",
      "startDate":"today+8",
      "startTime":"09:00",
      "endTime":"19:00"
    },
    {
      "name":"Reminder 2/3 to test the Add to Calendar Button",
      "description":"This is the second part to check the Add to Calendar Button script at [url]https://add-to-calendar-button.com/[/url]",
      "startDate":"today+5",
      "startTime":"11:30",
      "endTime":"20:00"
    }
  ]'
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  lightMode="bodyScheme"
></add-to-calendar-button>
Get blown away by the PRO offering

Want more functionality and way less trouble?

Example 6: Custom Label

You can customize the button's label as well as all other text labels.
In the example, we also set the listStyle to an overlay list, slightly reduce the size, and set a custom ics file name.

If you want to change other text blocks, you can do so with the "customLabels" option - check the "Configuration" page as well as our Advanced Example for details. 

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  label="Hit me to save!"
  iCalFileName="Reminder-Event"
  listStyle="overlay"
  size="5"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 7: Inline Button

Per default, the button is a block element, which opens a dropdown on hover.
As an alternative, you can also make the button render inline.

In this example, we also made the "listStyle" a modal, which automatically sets the click trigger.

Do it! →
<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  label="Click me hard!"
  inline
  listStyle="modal"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 8: One calendar type only

When you specify only 1 calendar type, there will be no list at all.
Instead, the button itself becomes the calendar link. 

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="Google"
  lightMode="bodyScheme"
></add-to-calendar-button>

Example 9: Splitting a button

With the option "buttonsList", you can split the button into multiple - one per calendar type.

In this example, we also used the round button style and hide the button label.

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2024-12-23"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  buttonsList
  hideTextLabelButton
  buttonStyle="round"
  lightMode="bodyScheme"
></add-to-calendar-button>

Let's directly test most of the options at our playground!

Start playing

If you are looking for crazy customization, you can check out the "danger zone".

Advanced Usage
Get blown away by the PRO offering

Discover the PRO offering

More functionality (like RSVP) and way less trouble thanks to managed ics file hosting, no-code customization, and more.

Legal Notice | Privacy Policy | License | Help
© 2024 , Current Version: 2.8.0