Options guide of Add to calendar

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.

• list
• labels
• start
• end
• title
• description
• location
• customClass
• monochrome

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.

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

Labels

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

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

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.

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.

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.

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.

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.

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.

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

monochrome

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

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
});