Fullcalendar resources eventListener

57 views Asked by At

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);
            }
        }
    }
},
0

There are 0 answers