Full Calendar event resource with on click event

Question

On the latest version of Full Calendar, I have a link wrapped around my event resources. When you double click on the event resource name I would like a modal to pop up.

The problem I'm having is as soon as the calendar loads it loads each of the modals for each of the resources as if I've just double-clicked on them.

Has anybody else come across this and does anybody have any idea on how to fix it?

 resourceRender: function(renderInfo) {
    if(renderInfo.resource.extendedProps.unassign==false)
      renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>" + renderInfo.resource.title + "</a>";
    else
      renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<span class='text-red'>" + renderInfo.resource.title + "</span>";
  },

Answer 1

The problem is the way you've created the hyperlink:

.innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>"

In that context, showProfileModal() is not part of your HTML string, instead it's treated as actual code to be executed...and so that's what happens, it gets executed.

You're using it as if the result of that function was something to be included in the HTML string. If you want that to be treated as text, something to be added to the HTML declaration, then include it inside the string:

.innerHTML = '<a ondblclick="showProfileModal(\'staff\',\'' + renderInfo.resource.id + '\')\" class=\"text-staff\">'

Demo: https://codepen.io/ADyson82/pen/WNeKYav?&editable=true&editors=001

(Of course if you wanted to make that code less messy without all the character escaping and so on, you could use createElement and addEventListener to create the hyperlink and set the double-click event handler instead.)