Aquí hay un fragmento de mi código. Archivo simple user-calender.js. En la llamada Ajax estoy iniciando fullCalendar

 let calendarElement; window.ZC_Calendar = { calendarElement: undefined, init: function () { this.calendarElement = new FullCalendar.Calendar( document.getElementById('userCalender'), { timezone: 'local', customButtons: { occupied: { text: 'Occupied', }, onLeave: { text: 'On leave', }, available: { text: 'Available', }, }, headerToolbar: { right: 'prev,next dayGridMonth,timeGridWeek,timeGridDay', center: 'title', left: 'available occupied onLeave', }, firstDay: 1, allDaySlot: true, navLinks: true, dayMaxEvents: true, displayEventEnd: true, displayEventTime: true, } ); this.calendarElement.render(); }, };

Ahora iniciando el calendario en alguna acción:

 .on('change', '#teamMembers', function (e) { if ($(this).val() > 0) { ZC_Calendar.init(); self.userAvailabilityCalender(this); } })

Aquí está la llamada final de ajax, que obtiene los datos y los carga en el calendario. Aquí, después de addEvent, quiero mostrar la información sobre herramientas de la parte de descripción

 userAvailabilityCalender: function (input) { ZC_Calendar.calendarElement.removeAllEvents(); $.ajax({ url: Routing.generate('get_user_calender', {userId: $(input).val()}), type: 'GET', success: function (response) { for (let i = 0; i < response['events'].length; i++) { ZC_Calendar.calendarElement.addEvent(response['events'][i]); } } }); },

Salida final del calendario: