Callbacks guide of Add to calendar

Add to calendar includes a few callback functions to customize its behavior and respond to user interactions. These callbacks can be set in the configuration options during initialization.

• onDropdownOpen
• onDropdownExit
• onOptionClick

onDropdownOpen

This callback is executed when the dropdown opens after the trigger is clicked. It can be used to add custom behaviors, like applying styles to the trigger element.

How to set

new atc('#myButton', {
  onDropdownOpen: function (res) {
    res.trigger.classList.add('focused');
  }
});

Returned value

{
  "trigger": [trigger DOM element],
  "dropdown": [dropdown DOM element]
}

onDropdownExit

This callback is triggered when the dropdown is closed and removed. It can be used to reset styles or perform cleanup actions.

How to set

new atc('#myButton', {
  onDropdownExit: function (res) {
    res.trigger.classList.remove('focused');
  }
});

Returned value

{
  "trigger": [trigger DOM element],
  "dropdown": [dropdown DOM element]
}

onOptionClick

This callback is triggered when a dropdown option is clicked. It returns the key code of the option clicked, allowing you to update the UI or perform specific actions at any click.

How to set

new atc('#myButton', {
  onOptionClick: function (key) {
    console.log(key);
  }
});

Returned value

"google"