带有点击事件的完整日历事件资源

Question

在最新版本的完整日历中，我有一个 link 包裹着我的活动资源。当您双击事件资源名称时，我希望弹出一个模式。

我遇到的问题是，一旦加载日历，它就会加载每个资源的每个模式，就像我刚刚双击它们一样。

有没有其他人遇到过这个问题，有没有人知道如何解决这个问题？

 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

问题在于您创建超链接的方式：

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

在这种情况下，showProfileModal() 不是您的 HTML 字符串的一部分，而是被视为要执行的实际代码……所以这就是发生的事情，它被执行了。

您正在使用它，就好像该函数的结果是要包含在 HTML 字符串中的东西。如果您希望将其视为文本，将某些内容添加到 HTML 声明中，然后将其包含在字符串中：

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

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

（当然，如果你想让代码不那么混乱而不需要所有字符转义等等，你可以使用 createElement 和 addEventListener 创建超链接并设置双击事件处理程序。）

带有点击事件的完整日历事件资源

Full Calendar event resource with on click event

javascript

html

fullcalendar

fullcalendar-scheduler

fullcalendar-4