Options

How to set an option

"Add to calendar" options can be set in two ways:

by using a data attribute;
by using Javascript when initializing an element.

Set an option by using a data attribute

In order to set an option by using a data attribute, add and customize the related attribute on the element on which "Add to calendar" has to be executed.

For instance, you can change the timezone by simply customizing the selector as follows:

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

Set an option by using Javascript

You can also set an option during the initialization by customizing the related Add to calendar function.

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

Options and default values

"Add to calendar" provides you with several options to customize your "add to calendar" dropdown.

Index

Basic options

list
labels
start
end
title
description
location
styled

Styling options

theme

Basic options

list

This option sets the calendars you want to list on the "Add to calendar" dropdown. Just choose what calendar you want to include separeting them with comma.

Type	string/false
Default	apple,google,yahoo,outlook

EXAMPLES

Sample configuration with data attribute

<button data-atc-list="apple,google">Add to calendar</button>

Sample configuration with Javascript

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

ALLOWED VALUES

google	Google Calendar
apple	Apple Calendar
outlook	Outlook Calendar
yahoo	Yahoo Calendar

labels

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

Type	boolean
Default	true

EXAMPLES

Sample configuration with data attribute

<button data-atc-labels="false">Add to calendar</button>

Sample configuration with Javascript

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

start

Use the start option to set starting date of the event

FEATURES

Type	string
Default	false

EXAMPLES

Sample configuration with data attribute

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

Sample configuration with Javascript

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

end

Use the end option to set ending date of the event

Type	string
Default	false

EXAMPLES

Sample configuration with data attribute

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

Sample configuration with Javascript

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

title

Use the title option to set theevent title to be saved on calendar.

Type	string
Default	false

EXAMPLES

Sample configuration with data attribute

<button data-atc-title="My event name">Add to calendar</button>

Sample configuration with Javascript

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

description

Use the description option to set the event description to be saved on calendar.

Type	string
Default	false

EXAMPLES

Sample configuration with data attribute

<button data-atc-description="The event description here">Add to calendar</button>

Sample configuration with Javascript

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

location

Use the location option to set event location/address to be saved on calendar.

Type	string
Default	false

EXAMPLES

Sample configuration with data attribute

<button data-atc-location="Address of the event">Add to calendar</button>

Sample configuration with Javascript

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

timezone

Use the timezone option to set event date timezone to be saved on calendar. It will automatically fix the date based on user position.

Type	string
Default	false

EXAMPLES

Sample configuration with data attribute

<button data-atc-timezone="America/Los_Angeles">Add to calendar</button>

Sample configuration with Javascript

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

styled

Set the styled option to true if you want to use the default "Add to calendar" button style. By default it depends on the CSS style of the element you are initializing.

Type	boolean
Default	false

EXAMPLES

Sample configuration with data attribute

<button data-atc-styled="true">Add to calendar</button>

Sample configuration with Javascript

new atc(document.querySelector("#myButton"),{
  styled: true
});

Style options

theme

Use the theme option to set the main theme color of the "add to calendar" button.

Type	string
Default	white

EXAMPLES

Sample configuration with data attribute

<button data-atc-theme="dark">Add to calendar</button>

Sample configuration with Javascript

new atc(document.querySelector("#myButton"),{
  theme: "dark"
});

ALLOWED VALUES

white
dark