Having trouble configuring button via config file

[dirkkelderman]

Hello,

I'm trying the "go-absolutely-crazy" option by styling my own button. I'm trying to set some configurations via the config file. Some keys will apply, and some wont. For instance the hidebackground =. true option does disable the background, but triggering the menu dropdown option does not apply. Any help with this? Or perhaps other user encounter the same problem?

export const AddToCalendarButtonNew = () => {
  const config: object = {
    name: '[Reminder] Test the Add to Calendar Button',
    description:
      'Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/',
    startDate: '2023-06-09',
    startTime: '10:15',
    endTime: '23:30',
    options: [
      'Google|Google',
      'iCal|iCal',
      'Microsoft365|Outlook (UvA)',
      'Outlook.com|Outlook (persoonlijk)',
    ],
    timeZone: 'currentBrowser',
    hideBackground: true,
    listStyle: 'dropdown',
  };

  const handleButtonClick = () => {
    // You need to replace "atcb_action" with the real implementation of the function handling the event.
    atcb_action(config);
  };

  return (
    <StyledButton variant="outline" id="my-default-button" onClick={handleButtonClick}>
      <StyledButtonIcon position="left" icon="calendar-alt" />
      Voeg toe aan agenda
    </StyledButton>
  );
};

[jekuer]

you should provide the second argument as well. the second one should reference the custom button element (please compare to the example on the demo page).
If this argument is omitted, some things might not work as expected, since the script does not know about your button - it can only make assumptions.

[dirkkelderman]

Thanks for the quick answer, but I'm afraid I don't really get what you mean. I would like the default behaviour of the dropdown, but using the config file somehow sets the default to modal. How would I solve that?

[jekuer]

If you check the example at https://add-to-calendar-button.com/advanced-use#case-10, you see that there is a second argument. It is optional, but if not set, there is no chance to use the dropdown option, because the script does not know where to put it. You need to provide a reference to your element for that!

button.addEventListener('click', () => atcb_action(config, button));