I am trying to pass an object (an event of fullcalendar) to a function using the value field of <button value=object> in html, so when the button is clicked it passes the object. Although when I print the object doing alert(obj) it gives me [object while doing alert(typeof obj) gives me string. Also if I try to use the delete function it tells me it's not a function, it seems to me like the object is not being passed, so am I doing something wrong or am I trying to achieve something impossible?
// 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>In my opinion, you should be passing the id instead of the object, doing a remove over a DOM element doesn't make much sense.
Refresh the events on the calendar filtering that id.
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();
});