0
769
Views¿Cómo eliminar un evento en FullCalendar?
Estoy tratando de eliminar un evento cuando se hace clic en él.
Esto es lo que tengo y no tengo ni 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] ); },La solución está realmente aquí: https://fullcalendar.io/docs/event_data/removeEvents/ pero todavía no puedo seguir. ¡Por favor ayuda!
3 answers
Answer question0
Para cualquiera que use reaccionar, esto es lo que terminé haciendo.
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) }) }y en mis hojas de estilo:
.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'); } Y así es como se ve: 
Espero que encuentres esto útil. Paz
0
En mi código, elimino el evento en fullcalendar de esa manera
$('#calendar').fullCalendar('removeEvents' , function(ev){ return (ev._id == calEvent._id); })0
Bueno, este es un caso típico. No recomendaría eliminar un evento al hacer clic. Como es confuso y no es una muy buena experiencia de usuario. La gente terminaría eliminando eventos por error muchas veces.
Habiendo dicho eso, puedes lograr lo que pediste con simples pasos. Vas bien con la devolución de llamada de eventClick . Y también con el método removeEvents . Sin embargo, si observa los documentos, removeEvents requiere la id del evento para eliminar. Entonces, para cada evento, necesitará una identificación única. Si hay eventos similares con la misma identificación, todos se eliminarán con removeEvents , de ahí la pluralidad en el nombre. Puede establecer eventos de esta manera
event = { start: "2017-04-06T16:00:00.510Z", end: "2017-04-06T21:00:00.510Z", id: "idForThisEvent", title: "Event 1" }Y luego haz lo que estabas haciendo
eventClick: function(calEvent, jsEvent, view) { $('#calendar').fullCalendar('removeEvents', calEvent.id); },Tendrá que manejar la eliminación de eventos de su backend/tienda/etc por separado antes/después de llamar a removeEvents. Buena suerte.