79774595

Date: 2025-09-25 09:01:06
Score: 0.5
Natty:
Report link

For everyone who has the same problem with Bootstrap Dropdowns inside the events of FullCalendar, here is the full solution based on @Noxx last comment. Maybe it will be useful for someone:

const bodyAppendForBootstrapDropdown = (dropdownSelector) => {
  const dropdowns = document.querySelectorAll(dropdownSelector);

  if (!dropdowns.length) return;

  dropdowns.forEach(dropdown => {
    const menu = dropdown.querySelector(':scope > .dropdown-menu');
    if (!menu) return;

    const originalParent = dropdown;

    dropdown.addEventListener('show.bs.dropdown', () => {
      document.body.appendChild(menu);
    });

    dropdown.addEventListener('hidden.bs.dropdown', () => {
      originalParent.appendChild(menu);
    });
  });
}

and in your FullCalendar:

eventDidMount: () => {     
  bodyAppendForBootstrapDropdown('.fc .fc-event .dropdown');
},
datesSet: () => {
  bodyAppendForBootstrapDropdown('.fc .fc-event .dropdown');
},
Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • User mentioned (1): @Noxx
  • Low reputation (0.5):
Posted by: Evgeniy Vashchuk