I am implementing a 'fullcalendar'(6.1.11) component inside my VueJs(2.7/3) application. So far I have got my TimeGridView, my events and resources. I was wondering if it is possible to add actions to resources, or better, if I click on the title of the column header(ordered by resource.name) some action will take place, for example: a dropDown menu appears. Is there a simple way to implement this within fullcalendar options like calendarOptions, or I have to adapt any Jquery strategies. Any help is welcome.
data() {
return {
calendarOptions: {
events: myEvents,
resources: myResources,
resourcesLabelsEvents: ??
}
}
Best Regards, LuFer
I tried documentation but nothing helped...
UPDATE: I have been digging the callback resourceLabelDidMount and so far:
initialView: "resourceTimeGridDay",
resources: [this.$store.getters["calendar/coworkers"]],
resourceLabelDidMount: function(arg) {
if(arg.resource.id) {
const resourceTitle = arg.el.querySelector('.fc-scrollgrid-sync-inner');
resourceTitle.addEventListener('click', (event) => {
const dropdownMenu = document.createElement('div');
dropdownMenu.className = 'dropdown-menu';
dropdownMenu.innerHTML = `
<a href="#">option 1</a>
<a href="#">option 2</a>
<a href="#">option 3</a>
`;
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.top = event.clientY + 'px';
dropdownMenu.style.left = event.clientX + 'px';
document.body.appendChild(dropdownMenu);
document.addEventListener('click', closeDropdownMenu);
});
function closeDropdownMenu(event) {
const dropdownMenu = document.querySelector('.dropdown-menu');
if (dropdownMenu && !dropdownMenu.contains(event.target)) {
dropdownMenu.remove();
document.removeEventListener('click', closeDropdownMenu);
}
}
}
},