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 star 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/add2cal/add-to-calendar-button[/url]",
  "startDate":"2023-02-14",
  "endDate":"2023-02-14",
  "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.
Here, we also let the button adapt to the page's dark/light mode.

<div class="atcb" style="display:none;">
{
  "name":"Reminder to star the add to calendar button repo",
  "description":"Check out the maybe easiest way to include add to calendar buttons to your website:\n→ [url]https://github.com/add2cal/add-to-calendar-button|Click here![/url]",
  "startDate":"2023-01-14",
  "endDate":"2023-01-16",
  "location":"World Wide Web",
  "options":[
    "Apple",
    "Google",
    "iCal",
    "Microsoft365",
    "MicrosoftTeams",
    "Outlook.com",
    "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 set the listStyle to an overlay list, enlarge the size, as well as removed the custom iCal/ics name and explicitly set a static downloadable ics file instead.

<div class="atcb" style="display:none;">
{
  "name":"Reminder to star 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/add2cal/add-to-calendar-button|Click here![/url]",
  "startDate":"2023-01-14",
  "endDate":"2023-01-18",
  "location":"World Wide Web",
  "label":"Hit me to save!",
  "options":[
    "Apple|Apple is ok for me",
    "Google|Add to Google Cal",
    "Microsoft365|Use Microsoft instead",
    "Yahoo|Yahoo, really?",
    "iCal|iCall ftw!"
  ],
  "icsFile":"https://add-to-calendar-button.com/demo-event.ics",
  "listStyle":"overlay",
  "size":"8",
  "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.
This example also generates online-event-rich-schema in the background, since the location is a URL.

<div class="atcb" style="display:none;">
{
  "name":"Reminder to star 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/add2cal/add-to-calendar-button[/url]",
  "startDate":"today+2",
  "endDate":"today+4",
  "location":"https://github.com/add2cal/add-to-calendar-button",
  "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 and the modal option (which prevents the dropdown).

Do it! →
<div class="atcb" style="display:none;">
{
  "name":"Reminder to star 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/add2cal/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: Recurring Events

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 option won't show up for that reason.
You can also specify the rule in more simple terms. Check the README for more details on that
(Setting a URL as location makes it an online event from a data point of view.)

<div class="atcb" style="display:none;">
{
  "name":"Recurring reminder to star 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/add2cal/add-to-calendar-button[/url]",
  "startDate":"2023-07-13",
  "endDate":"2023-07-13",
  "startTime":"10:45",
  "endTime":"15:00",
  "location":"https://github.com/add2cal/add-to-calendar-button",
  "options":[
    "Apple",
    "Google",
    "Yahoo",
    "iCal"
  ],
  "timeZone":"Europe/Berlin",
  "recurrence":"RRULE:FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=WE,FR;COUNT=10",
  "iCalFileName":"Reminder-Event"
}
</div>

Example 7: Multi-Date Events

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.
Each part can have his own name, description, and location. If not given, a global one will be used (in the example, we use the location globally).
Individual date and time information would be required - global ones will be ignored.
(Mind that in the example, we left out the endDate, since we do not want to span >1 day per date.)

<div class="atcb" style="display:none;">
{
  "name":"Event Series",
  "dates":[
    {
      "name":"Event #1/2 to star the add to calendar button repo",
      "description":"This is the first part to check the calendar button repository:
→ [url]https://github.com/add2cal/add-to-calendar-button[/url]", "startDate":"today+3", "startTime":"10:15", "endTime":"23:30" }, { "name":"Event #2/2 to star the add to calendar button repo", "description":"This is the second part to check the calendar button repository:
→ [url]https://github.com/add2cal/add-to-calendar-button[/url]", "startDate":"today+5", "startTime":"13:15", "endTime":"15:05" } ], "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Outlook.com", "Yahoo" ], "timeZone":"Europe/London", "iCalFileName":"Multi-Date-Event" } </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.

<button id="default-button">Add to calendar</button>
<script type="application/javascript">
  const config = {
    name: "Reminder to star 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/add2cal/add-to-calendar-button[/url]",
    startDate: "2023-01-14",
    endDate: "2023-01-18",
    options: ["Google", "iCal"],
    timeZone: "Europe/Berlin",
    trigger: "click",
    iCalFileName: "Reminder-Event",
  };
  const button = document.getElementById('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.
However, for better compatibility and stability, define a triggering element, wich then gets focused on closing the modal; and set the listStyle option to "modal".
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 id="myTriggerElement" type="submit" value="Save" />
</form>
<script type="application/javascript">
  const triggerEl = document.getElementById('myTriggerElement');
  document.getElementById('event-form')
    .addEventListener('submit', (e) => {
      e.preventDefault();
      atcb_action({
        name: e.currentTarget.elements.name.value,
        startDate: "2023-01-14",
        endDate: "2023-01-18",
        options: ["Apple", "Google", "iCal", "Microsoft365", "Outlook.com", "MicrosoftTeams", "Yahoo"],
        timeZone: "Europe/Berlin",
        listStyle: "modal",
        iCalFileName: "Reminder-Event",
      }, triggerEl);
    });
</script>


Get the Code!

v1.18.8