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

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

$var

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之前/之后，您必须分别处理从后端/存储/ etc中删除事件。祝你好运。

Answer 4

对于任何使用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');
}

这是它的外观：

希望这对您有所帮助。和平

如何删除FullCalendar上的事件？

4 个答案: