Estoy tratando de pasar un objeto (un evento de calendario completo) a una función usando el campo de value de <button value=object> en html, por lo que cuando se hace clic en el botón pasa el objeto. Aunque cuando imprimo el objeto haciendo alert(obj) me da [object mientras hago alert(typeof obj) me da string . Además, si trato de usar la función de eliminar, me dice que no es una función, me parece que el objeto no se está pasando, ¿estoy haciendo algo mal o estoy tratando de lograr algo imposible?
// this is js code function test(button) { if (confirm("Are you sure you want to remove it?")) { let event = button.getAttribute('value'); alert(typeof event); alert(event); event.remove(); } }; $(document).ready(function() { calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { locale: 'it', headerToolbar: { right: 'today prev next', center: 'title', left: '', }, initialView: 'listDay', views: { listDay: { type: 'listWeek', dayCount: 1 } }, events: [{ id: '1', title: "Default title", start: "2022-06-17 19:00", }, { id: '2', start: "2022-06-17 09:00", title: "Event 2" }, ], eventContent: function(args) { id = args.event.id; let event = calendar.getEventById(id); const text = args.event._def.title + '<button style="float:right" onclick="test(this)" value=' + event + '> delete </button>'; return { html: text }; }, }); calendar.render(); }); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="calendar"></div> </body> </html>En mi opinión, debería pasar la identificación en lugar del objeto, hacer una eliminación sobre un elemento DOM no tiene mucho sentido.
Actualice los eventos en el calendario filtrando esa identificación.
var calendar = null; function test(id) { if (confirm("Are you sure you want to remove it?")) { alert(id); if(calendar!=null){ var eventToRemove = calendar.getEventById(id); eventToRemove.remove(); } } } document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar"); calendar = new FullCalendar.Calendar(calendarEl, { locale: "it", headerToolbar: { right: "today prev next", center: "title", left: "" }, initialView: "listDay", views: { listDay: { type: "listWeek", dayCount: 1 } }, headerToolbar: { left: "prev,next today", center: "title" }, events: [ { id: "1", title: "Default title", start: "2022-06-17 19:00" }, { id: "2", start: "2022-06-17 09:00", title: "Event 2" } ], eventContent: function (args) { id = args.event.id; let event = calendar.getEventById(id); // pass the Id instead of the object const text = args.event._def.title + '<button style="float:right" onclick="test('+event.id+')">delete</button>'; return { html: text }; } }); calendar.render(); });