0
777
ViewsHow to delete an event on FullCalendar?
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!
3 answers
Answer question0
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
0
In my code I delete event in fullcalendar in that way
$('#calendar').fullCalendar('removeEvents' , function(ev){
return (ev._id == calEvent._id);
})
0
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.