Pass a date as prop to atcb_init parameters

[belkocik]

Hello, is it possible to pass a date as prop to atcb_init?
eg. collectRubishDate prop to startDate":"2022-02-21", -> startDate": collectRubishDate

import React from "react";
import { atcb_init } from "add-to-calendar-button";
import 'add-to-calendar-button/assets/css/atcb.css';

const MyComponent = ({collectRubishDate}) => {
  React.useEffect(atcb_init, []);
  return (
    <div className="atcb">
      { '{' }
        "name":"Add the title of your event",
        "description":"A nice description does not hurt",
        "startDate": collectRubishDate, // a value 2022-05-21 here from collectRubishDate
        "endDate":"2022-03-24",
        "startTime":"10:13",
        "endTime":"17:57",
        "location":"Somewhere over the rainbow",
        "label":"Add to Calendar",
        "options":[
          "Apple",
          "Google",
          "iCal",
          "Microsoft365",
          "Outlook.com",
          "Yahoo"
        ],
        "timeZone":"Europe/Berlin",
        "iCalFileName":"Reminder-Event"
      { '}' }
    </div>
  );
}

with atcb_action i can do it like:

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

const AddToCalendar = ({ collectRubishDate }) => {
  //   console.log(collectRubishDate);
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        atcb_action({
          name: "xd",
          startDate: collectRubishDate,
          endDate: "2022-10-18",
          options: [
            "Apple",
            "Google",
            "iCal",
            "Microsoft365",
            "Outlook.com",
            "Yahoo",
          ],
          timeZone: "Europe/Berlin",
          iCalFileName: "Reminder-Event",
        });
      }}
    >
      <button type="submit" value="save">
        Save
      </button>
    </form>
  );
};

export default AddToCalendar;

[jekuer]

Hi @bubuq3 ,

first, welcome!
I moved the issue to the discussion area, since it is rather a question.

The answer: Yes, you can.
The following should work:

    <div className="atcb">
      { '{' }
        "name":"Add the title of your event",
        "description":"A nice description does not hurt",
        "startDate": " {collectRubishDate} ",
        "endDate":"2022-03-24",
        "startTime":"10:13",
        "endTime":"17:57",
        "location":"Somewhere over the rainbow",
        "label":"Add to Calendar",
        "options":[
          "Apple",
          "Google",
          "iCal",
          "Microsoft365",
          "Outlook.com",
          "Yahoo"
        ],
        "timeZone":"Europe/Berlin",
        "iCalFileName":"Reminder-Event"
      { '}' }
    </div>