How to use the JS variable in the content?

[szewingleung]

originally, the code is like this:
<add-to-calendar-button
name="function"
options="'Apple','Google'"
location="World Wide Web"
startDate="2023-03-27"
endDate="2023-03-27"
startTime="10:15"
endTime="23:30"
timeZone="Asia/Hong_Kong"

but if i want to use the js variable inside the parameters, and to use the js variable as the content inside the calendar, what should i do?

[jekuer]

Hi @szewingleung,

I am not exactly sure what you are after.
The code behaves like a regular HTML element.
So, if you want to change a parameter, you could do something like...

const addBtn = document.querySelector('add-to-calendar-button');
const currentDate = new Date();
const formattedDate = currentDate.toISOString().slice(0,10);
addBtn.setAttribute('startDate', formattedDate);

This selects the button (assumes there is only 1 - otherwise, set a unique ID), gets the current date, formats it, and updates the respective attribute.

With a JavaScript framework (like React or Vue) in place, it would be even easier. Check out the Guides at https://add-to-calendar-button.com/#installation for more details on that.