We have defined a custombutton which is diabled \enabled on a certain value. This is working so far:
I'm working with Vue.
const updateMyCustomButton = async (): Promise<void> => {
await nextTick();
const btn = document.querySelector(".fc-my-custom-button") as HTMLButtonElement | null;
if (btn) {
if (buss.value?.startDay === undefined) {
btn.classList.add("is-disabled");
} else {
btn.classList.remove("is-disabled");
}
}
};
This is working.
But if try it with adding the attribute 'disabled like:
btn.toggleAttribute("disabled", ?);
btn.setAttribute("disabled", "?");
btn.disabled = ?;
The question mark "?" is than replaced with 'true' or 'false'. The attribute is added and the button is disabled.
But if I click on the calendar, than the button is already enabled while on that moment nothing has been changed so it should stay disabled
It seems that the fullcalendar is rerendering the calendar when I click on the calendar and removing the attribute "disabled"
This is not happening with adding\removing the css class 'is-disabled'.
I've tried the 'viewDidMount', I try to find another hook function, to call the 'updateMyCustomButton'.
I should like to use the attribute because than the behaviour is the same in the whole application. For example I have cursor: not-allowed and pointer-events: none, if I hover over the disabled button than it shows nothing while other disabled buttons shows 'red circle with bar'.