Quería crear el calendario completo. FullCalendar está en modal cuando el sitio web se abre en el teléfono. Así que creé dos etiquetas div y escondí una etiqueta dependiendo de la pantalla del teléfono.
Una vez que el usuario seleccione en el calendario completo, se agregará el evento.
longPressDelay: 1, selectAllow: function(selectInfo){ return true; }, selectOverlap: function(event) { return true; }, select: function(info){ var myid = makeid(8); // create random string calendar.addEvent({ title: "test", start: info.startStr + "+09:00", end: info.endStr + "+09:00", editable: true, color: "#0000FF", id: myid, }); }, Ahora, para agregar un botón cruzado en cada evento, utilicé EventDidMount y quería agregar un botón cruzado cuando el color de fondo del evento es #0000FF .
Una vez que se agrega el botón Cruzar, utilicé el evento onClick para eliminar el evento.
eventDidMount: function(event){ var v = event.event; if(event.backgroundColor === "#0000FF"){ var myid = v.id; var v = event.el; let find = v.querySelector('.fc-event-main-frame'); let myhtml = `<i class="fa fa-times float-right" aria-hidden="true"></i>`; let mydiv = document.createElement('div'); mydiv.className = 'close-event float-right'; mydiv.innerHTML = myhtml; find.insertBefore(mydiv,find.firstChild); mydiv.onclick = function(){ console.log("cross clicked"); myevent = calendar.getEventById(myid); myevent.remove(); } } }, La eliminación de eventos funciona perfectamente en el tamaño de la pantalla de la PC, pero cuando cambio a la pantalla SP, el botón Cruz no se elimina. Entonces, en el tamaño de la pantalla de la PC, cross clicked está en la consola al hacer clic en la cruz, pero en el tamaño de la pantalla SP, el evento onClick no se activa. No puedo ver ningún problema en el código, ¿Cómo puedo solucionarlo?
$(document).ready(function() { $("#calendar").fullCalendar({ header: { left: "prev,next today", center: "title", right: "month,agendaWeek,agendaDay" }, defaultView: "month", navLinks: true, // can click day/week names to navigate views selectable: true, selectHelper: false, editable: true, eventLimit: true, // allow "more" link when too many events select: function(start, end) { var title = prompt("Event Content:"); var eventData; if (title) { eventData = { title: title, start: start, end: end, color: $("#colorPicker").val() }; $("#calendar").fullCalendar("renderEvent", eventData, true); // stick? = true } $("#calendar").fullCalendar("unselect"); }, eventRender: function(event, element) { element .find(".fc-content") .prepend("<span class='closeBtn material-icons'></span>"); element.find(".closeBtn").on("click", function() { $("#calendar").fullCalendar("removeEvents", event._id); }); }, eventClick: function(calEvent) { var title = prompt("Edit Event Content:", calEvent.title); calEvent.title = title; $("#calendar").fullCalendar("updateEvent", calEvent); }, }); }); body { margin: 40px 10px; padding: 0; font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } #wrap { width: 1100px; margin: 0 auto; } .closeBtn { border-radius: 5px; } <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script> </head> <body> <div id='calendar'></div> <span><input type='color' id='colorPicker'></span> </body> </html>