Tengo problemas para agregar eventos en 'FullCalendar', tenga en cuenta que mi conocimiento de javascript es bastante pequeño, por lo que la solución puede ser simple.
De cualquier manera, comencé a usar FullCalendar para mostrar eventos de mi base de datos ya existente, hasta ahora funciona bien, excepto que me cuesta agregar un evento después de representar el calendario.
He seguido la documentación, mi código:
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { // Calendar options }); calendar.render(); }); function addevent() { calendar.addEvent({ start: '2022-05-23T14:00:00', end: '2022-05-23T15:00:00', title: 'Test' } }Se llama a la función addevent() después de completar un formulario en la página, el formulario se envía con Ajax y se almacena en la base de datos, se necesitaría una actualización de la página para mostrar ese evento, pero me gustaría mostrarlo de inmediato.
Sin embargo, recibo el error 'el calendario no está definido', lo cual tiene sentido porque no aclaré la variable. No tengo idea de cómo hacer que esto funcione, y tampoco puedo encontrarlo en la documentación. Después de buscar en Google, probé el siguiente código:
function addevent() { var event = { start: '2022-05-23T14:00:00', end: '2022-05-23T15:00:00', title: 'Test' } $('#calendar').fullCalendar('renderEvent',event,true); }Lo que devuelve '$(...).fullCalendar no es una función', esto parece estar funcionando en versiones anteriores, creo, estoy usando la versión 5.
¡Cualquier ayuda se agradece, gracias por adelantado!
Esto es simplemente sobre el alcance variable. calendar no está disponible en su función addevent porque lo declaró dentro de la devolución de llamada DOMContentLoaded y, por lo tanto, solo es accesible dentro de esa función de devolución de llamada.
Una forma de resolver esto es hacer que la variable sea global:
var calendar = null; document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); calendar = new FullCalendar.Calendar(calendarEl, { // Calendar options }); calendar.render(); }); function addevent() { calendar.addEvent({ start: '2022-05-23T14:00:00', end: '2022-05-23T15:00:00', title: 'Test' } }Referencia / lectura más amplia: ¿Cuál es el alcance de las variables en JavaScript?
PD Tienes razón en que $('#calendar').fullCalendar('renderEvent',event,true); es la sintaxis de versiones anteriores de fullCalendar, específicamente v3 y anteriores cuando fullCalendar se implementó como un complemento de jQuery.