Javascript plugins
jQuery plugins
Legal
How to Customize the "Add to calendar" Style
"Add to calendar" allows for extensive customization, enabling you to tailor its appearance to match your website's design. Below, you’ll find detailed instructions on how to modify its styles using CSS variables and predefined options.
You can apply the following CSS variables by adding them directly to your stylesheet or by creating a new one and linking it to the <head> section of your website.
:root {
--atc-background: white;
--atc-text: #222;
--atc-primary: #6563FF;
--atc-buttonSeparatorColor: rgba(0,0,0,0.1);
--atc-buttonBackgroundColor: var(--atc-background);
--atc-buttonTextColor: var(--atc-text);
--atc-buttonHoverBackgroundColor: rgba(0,0,0,0.025);
--atc-buttonHoverTextColor: var(--atc-buttonTextColor);
--atc-iconBackgroundColor: var(--atc-background);
--atc-iconBorderColor: rgba(0,0,0,0.1);
--atc-iconFillColor: var(--atc-primary);
--atc-iconHoverBackgroundColor: var(--atc-iconBackgroundColor);
--atc-iconHoverBorderColor: var(--atc-iconBorderColor);
--atc-iconHoverFillColor: var(--atc-iconFillColor);
}These CSS variables are defined in the :root, meaning they are applied globally. However, if you want to customize styles for individual "Add to calendar" dropdown, you can use the customClass option as shown below:
<button data-option-custom-class="style1">Save the date</button>
<button data-option-custom-class="style2">Save the date</button>
By adding new classes, you can override specific style properties. For example, to change only the primary color for each timepicker, use the following code:
.style1 {
--atc-primary: red;
}
.style2 {
--atc-primary: green;
}With this setup, the "Add to calendar" dropdown will use the root variables by default but apply the customized primary color for the specific styles.
You can also inspect elements in your browser’s developer tools to identify additional classes and customize them further in your CSS stylesheet.
Style Presets
"Add to calendar" comes with three built-in style presets. You can easily apply them using the customClass option. Here’s an example:
<button data-option-custom-class="atc--[NAME]">Save the date</button>| Option | Result |
|---|---|
| atc--dark | |
| atc--bootstrap |