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.
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 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 |