如何删除 FullCalendar 上的事件？

Question

我试图在单击事件时删除该事件。

这是我所拥有的，但我不知道

        eventClick: function(calEvent, jsEvent, view) {

            alert('Event: ' + calEvent.title);
            alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
            alert('View: ' + view.name);
            alert('This needs to be deleted');

        // change the border color just for fun
        $(this).css('border-color', 'red');
        $('#calendar').fullCalendar(
            'removeEvents'
            [this] );

    },

解决方案实际上在这里：https://fullcalendar.io/docs/event_data/removeEvents/ 但我还是跟不上。 请帮忙！

Answer 1

在我的代码中，我以这种方式删除 fullcalendar 中的事件

$('#calendar').fullCalendar('removeEvents' , function(ev){  
    return (ev._id == calEvent._id);
})

Answer 2

对于任何使用 React 的人来说，这就是我最终所做的。

eventRender = ({ event, el }) => {
  const duration = moment.duration(moment(event.end).diff(event.start))
  const hours = duration.asHours()

  el.style.border = `1px solid ${event.backgroundColor}`
  el.className = `${el.className} event-class` // allows showing the edit and remove buttons only when hovering over the event

  if (!event.extendedProps.published && !event.allDay) {
      el.className = el.className + ' unpublished'  //it grays out the event if it hasn't been published
  }

  const child = document.createElement('div')
  child.innerHTML = `
      <div>
        <div  style="${styles.title}" class="pt-4">
          <strong>${hours} hrs </strong>      
        </div>

        <div class="event-actions">
          <button style="${styles.editStyle}" data-event-id=${event.id}> 
            <i class='fa fa-edit'></i>
          </button>
          <button style="${styles.removeStyle}" data-event-id=${event.id}> 
            <i class='fa fa-trash-o'></i> 
          </button>
        </div>
    </div>`

  el.appendChild(child)
  const btns = el.getElementsByTagName('button')
  const self = this
  btns[0].addEventListener('click', e => {
    self.onEditEvent(e)
  })
  btns[1].addEventListener('click', e => {
    self.onRemoveEvent(e)
 })
}

在我的样式表上：

 .fc-time-grid .fc-event {
   overflow: auto;
 }

 .event-class .event-actions {
   display: none;
 }


 .event-class:hover .event-actions {
   display: flex;
   justify-content: space-around;
   font-size: 1.75rem;
   padding-top: 4px;
 }

.unpublished {
  background-image: url('../assets/img/unpublish.png');
}

它看起来是这样的：

希望您觉得这有帮助。 和平

Answer 3

这是一个典型的案例。我不建议删除点击事件。因为它很混乱并且不是很好的用户体验。人们最终会多次错误地删除事件。

话虽如此，您可以通过简单的步骤实现您所要求的。 您将通过 eventClick 回调继续前进。还有 removeEvents 方法。但是，如果您查看文档，removeEvents 需要删除事件的

id

。因此，对于每个事件，您都需要一个唯一的 ID。如果存在具有相同 id 的相似事件，则所有这些事件都将被

removeEvents

删除，因此名称为复数。可以这样设置事件

event = {
    start: "2017-04-06T16:00:00.510Z",
    end: "2017-04-06T21:00:00.510Z",
    id: "idForThisEvent",
    title: "Event 1"
  }

然后做你正在做的事情

eventClick: function(calEvent, jsEvent, view) {
    $('#calendar').fullCalendar('removeEvents', calEvent.id);
},

您必须在调用removeEvents之前/之后分别处理从后端/商店/等中删除事件。 祝你好运。

Answer 4

你可以找到答案https://stackoverflow.com/a/14846637/7816429

$('#calendar').fullCalendar('removeEvents', calEvent._id);

Answer 5

Fullcalendar 中的每个事件都有自己的由 Fullcalender 生成的 ID。

我假设您想通过单击事件来删除该事件，因此请将其添加到您的参数中：

eventClick: function(calEvent, jsEvent, view) {
    $('#calender').fullCalendar('removeEvents', calEvent._id);
},