Here is what I am trying to achieve
(the button was edited via inspect element by me) I've been trying to implement it by using eventRender without any luck.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script> </script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css"></script>
</head>
<body>
<div id="calendar"></div>
<script>
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listDay',
views: {
listDay: {
type:'listWeek',
dayCount:1
}
},
events : [
{% for appointment in appointments %}
{
title : '{{ appointment[2] }}',
start : '{{ appointment[1] }}',
},
{% endfor %}
],
eventRender: function(info) {
info.el.innerHTML += "<button class='dayButton' data-date='" + info.start + "'>Click me</button>";
info.el.style.padding = "20px 0 0 10px";
}
});
calendar.render();
</script>
</body>
</html>
At the end I solved by doing this :
eventContent: function (args, createElement)
{
const text = args.event._def.title + '<button onclick="alert(\'hello\')" style="float: right"> ciao </button>';
return {
html: text
};
},