Esto es lo que estoy tratando de lograr
(el botón fue editado a través del elemento de inspección por mí) He estado tratando de implementarlo usando eventRender sin suerte.
<!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>Al final lo resolví haciendo esto:
eventContent: function (args, createElement) { const text = args.event._def.title + '<button onclick="alert(\'hello\')" style="float: right"> ciao </button>'; return { html: text }; },