Estoy tratando de agregar un campo personalizado en el calendario debajo del título, no se muestra, ¿alguna ayuda?
mi código:
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css' rel='stylesheet' /> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', initialDate: '2021-08-17', headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, events: [{ title: 'Event', name: 'John', start: '2021-08-17' }] }); calendar.render(); }); </script> </head> <body> <div id='calendar'></div> </body> </html>En código de trabajo fullcalendar v3:
$(document).ready(function() { $('#calendar').fullCalendar({ events: [{ title: 'My Event', name: 'John', start: '2021-08-12T12:00:00' }], eventRender: function(event, element) { element.find('.fc-title').append(event.name); } }); });en v5 eventRender se cambió a eventDidMount, pero cuando intento usar el método de búsqueda, aparece un error.
He usado vanilla js y del evento usé el objeto extendedProps que contiene campos no estándar:
events: [{ title: 'Event', name: 'John', start: '2021-08-17' }], eventDidMount: function(info) { let name = document.createElement('div'); name.innerHTML=info.event.extendedProps.name; document.querySelector('.fc-event-title-container').append(name); }