3

我正在尝试在单击事件时删除它。

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

        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/ 但我仍然无法遵循。请帮忙！

4

4 回答 4

3

在我的代码中，我以这种方式删除了全日历中的事件

$('#calendar').fullCalendar('removeEvents' , function(ev){  
    return (ev._id == calEvent._id);
})
于 2017-04-04T19:51:23.270 回答
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');
}

这就是它的外观： 在此处输入图像描述

希望你觉得这很有帮助。和平

于 2019-06-01T16:37:30.703 回答
1

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

话虽如此，您可以通过简单的步骤实现您的要求。您正在使用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 之前/之后，您必须分别处理从后端/存储/等中删除事件。祝你好运。

于 2017-04-06T15:43:53.743 回答
0

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

$('#calendar').fullCalendar('removeEvents', calEvent._id);
于 2017-04-04T19:52:36.640 回答