Fix my code

[ranran2121]

What happened?

I added the add-to-calendar-button in a (function) component in my nextjs app (and tailwind). At the beginning I used the class=actb and did some testing. After I tried the class=actb-3d but when I tried to switch back to the previous class, the button simply disappears. How can I go back to the previous class?

<div className="atcb-3d mt-4 lg:mt-7">
  <button
    className="w-full rounded-full bg-color3 text-color1 uppercase font-poppins-semibold p-2 text-sm lg:text-lg"
    onClick={() => {
      atcb_action({
        name: ``,
        description: ``,
        startDate: ``,
        endDate: ``,
        startTime: ``,
        endTime: ``,
        options: [
          "Apple",
          "Google",
          "iCal",
          "Microsoft365",
          "Outlook.com",
          "Yahoo",
        ],
        timeZone: "Europe/Berlin",
        iCalFileName: "Reminder-Event",
      });
    }}
  >
    <Image
      src="/img/.../calendar-check.svg"
      width={16}
      height={16}
    />
    <span className="ml-2 align-top">add to calendar</span>
  </button>
</div>

[jekuer]

Moved this to the "Discussions" board, since it is no issue or bug.
How are you loading and importing the script?

[ranran2121]

i am importing this way

import { atcb_action } from "add-to-calendar-button"; import "add-to-calendar-button/assets/css/atcb.css";

and calling the "atcb_action" in the Onclick event

[jekuer]

Did you change the class on runtime?
To be honest, I do not understand the problem here. Can you describe it in more detail and better structure?
The script would not alter the button here. Maybe omit using "atcb" as class name and check whether this makes a difference.