How to delete an event on FullCalendar?

Question

I am trying to delete an event when it is being clicked.

This is what I have and I have no idea

        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] );

    },

The solution is actually here: https://fullcalendar.io/docs/event_data/removeEvents/ but I still cant follow. Please Help!

Answer 1

In my code I delete event in fullcalendar in that way

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

Answer 2

For anyone using react, this is what I ended up doing.

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)
 })
}

and on my stylesheets:

 .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');
}

And this is how it looks:

Hope you find this helpful. Peace

Answer 3

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

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

Answer 4

Well this is a typical case. I would not recommend deleting an event on click. As it is confusing and not a very good user experience. People would end up deleting events by mistake many a times.

Having said that, you can achieve what you asked for with simple steps. You are going right with eventClick callback. And also with removeEvents method. However if you look at the docs, removeEvents requires id of the event to remove. So for each event you will need a unique id. If there are similar events with same id, all of them will be removed with removeEvents , hence the plurality in name. You can set events in this way

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

And then do what you were doing

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

You will have to handle removing event from your backend/store/etc separately before/after calling removeEvents. Good luck.