全日历添加按钮到事件类型脚本角度 [英] fullcalendar add button to event typescript angular

问题描述

正在尝试使事件上的按钮正常工作。由于某些原因我无法跟踪，它在事件呈现后立即执行。

initCalendar() {
  function onInteract (id) {
    console.log(id);   // <----- Executes once everything is rendered (not good)
  }
  this.calendarOptions = {
    ...,
    ...,
    eventRender: function(event, element) {
      ...
      ...
      listedUsers.forEach(function(a) {
        const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
        event.description = '' +
          '<div class="text-center">' +
          '<button mat-button style="width: 80%;' +
          '    color: black;
' +
          '    background-color: lightskyblue;
' +
          '    font-weight: bold;" (click)="' + onInteract(member) + '">' +
          member.firstName + ' ' + member.lastName +
          '</button>' +
          '</div>';
        element.find('.fc-bg').append('<br>' + event.description)
      })
    }
  }
}

我需要仅当我单击有问题的按钮时才执行该函数

协助？

编辑

这是原始设置的外观(上面的代码)：

这是我使用新设置的代码(遵循ngzone方法)

listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  event.description = element.find('.fc-bg button[mat-button]').click(() => onInteract(member));
  element.find('.fc-bg').append('<br>' + event.description)
})

现在这些按钮不会显示在事件上。 不过，我还没有实现ngZone(这对我来说是新的)。这和这件事有什么关系吗？我这是在正确的轨道上吗？

编辑%2

listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  event.description = element.find('.fc-bg')
  .append('<br><div style="text-align: center">' +
  '<button mat-button style="width: 80%;' +
  'color: black;' +
  'background-color: lightskyblue;' +
  'font-weight: bold;">' + member.firstName +  ' + ' + member.lastName +
  '</button></div>').click(() => onInteract(member));
  element.find('.fc-bg').append(event.description)
})

现在按钮不是在启动时执行，而是在单击时执行， 但这并不是真正的按钮执行，而是整个元素。 当我尝试单击该按钮时，它实际上会单击该元素本身，并与其所有按钮进行交互。表示我在最左侧的元素上有3个交互组件，在最右侧有1个交互组件。

我还是不明白：) 但是，我也不明白如何使按钮位于元素之上。我尝试position:relative和z-index到999999999

推荐答案

现在已解决

@Estus和this帖子帮助很大，谢谢您

eventRender函数变成这样：

listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  element.find('.fc-bg')
  .append('<br><div style="text-align: center">' +
  '<button mat-button style="width: 80%;' +
  'color: black;' +
  'background-color: lightskyblue;' +
  'font-weight: bold;" id="' + member._id + '">' + member.firstName + ' ' + member.lastName +
  '</button></div>');
})

新增eventClick函数：

const listedUsers = assigned.filter(function(o) {
  return this.indexOf(o.employeeMetadata.name) > -1;
  }, teamMembers.map((o) => o.member._id));
  listedUsers.forEach(function(a) {
  const member = teamMembers.filter((o) => o.member._id === a.employeeMetadata.name)[0].member;
  if (jsEvent.target.id === member._id) {
    onInteract(member)
  }
})

现在一切正常

再次感谢您！

这篇关于全日历添加按钮到事件类型脚本角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！