Options guide of Add to calendar

Try the new Add to calendar configurator to easily get the best plugin configuration!
Configure now

How to Set an Option

You can configure "Add to Calendar" options in two ways:

  • Using a data attribute
  • Using JavaScript during initialization

Setting an Option Using a Data Attribute

To configure an option with a data attribute, simply add and customize the relevant attribute on the element where "Add to Calendar" is applied.

For example, to set the timezone, modify the button as shown below:

<button type="button" class="atc-default" data-option-timezone="America/Los_Angeles">
  Add to Calendar
</button>

Setting an Option Using JavaScript

You can also configure options during initialization by passing thcode into the "Add to Calendar" function.

new atc("#myButton", {
  timezone: "America/Los_Angeles",
  theme: "dark"
});

Options and Default Values

"Add to Calendar" offers various customization options for your dropdown.


Basic Options


List

This option allows you to choose which options you want to display in the "Add to Calendar" dropdown. Simply select the options you want to include, separated by commas.

Typestring/false
Defaultapple, google, yahoo, outlook, whatsapp, telegram

EXAMPLES

Sample configuration using a data attribute:

<button data-option-list="apple,google">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  list: "google,outlook"
});

ALLOWED VALUES

googleGoogle Calendar
appleApple Calendar
outlookOutlook Calendar
yahooYahoo Calendar
whatsappWhatsapp
telegramTelegram

Labels

Set the labels option to false to hide the labels on the available calendars and display only the icons.

Typeboolean
Defaulttrue

EXAMPLES

Sample configuration using a data attribute:

<button data-option-labels="false">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  labels: false
});

Start

Use the start option to set the starting date and time of the event. The value should be passed by using the format YYYY/MM/DD hh:mm AM/PM.

FEATURES

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-start="2021/03/15 08:00 AM">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  start: "2021/03/15 08:00 AM"
});

End

Use the end option to set the ending date and time of the event. The value should be passed by using the format YYYY/MM/DD hh:mm AM/PM.

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-end="2021/03/18 09:00 PM">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  end: "2021/03/18 09:00 PM"
});

Title

Use the title option to set the event title that will be saved in the calendar.

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-title="My event name">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  title: "My event name"
});

Description

Use the description option to specify the event description that will be saved in the calendar.

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-description="The event description here">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  description: "The event description here"
});

Location

Use the location option to set the event's address or location to be saved in the calendar.

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-location="Address of the event">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  location: "Address of the event"
});

Timezone

Use the timezone option to set the event's timezone. It will automatically adjust the event time based on the user's location. Value should be passed in IANA Time Zone format.

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-timezone="America/Los_Angeles">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  timezone: "America/Los_Angeles"
});

Style Options


customClass

Use the customClass option to add an additional class to the "Add to Calendar" dropdown.

Typestring
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-customClass="atc--dark">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  customClass: "atc--dark"
});

PRESET VALUES

false
atc--dark

monochrome

Use the monochrome option to make the dropdown icons in monochrome.

Typeboolean
Defaultfalse

EXAMPLES

Sample configuration using a data attribute:

<button data-option-monochrome="true">Add to Calendar</button>

Sample configuration using JavaScript:

new atc("#myButton", {
  monochrome: true
});