Tengo el siguiente código, que usa FullCalendar y muestra un calendario:
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <link href='fullcalendar/main.css' rel='stylesheet' /> <script src='fullcalendar/main.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [ { title: "Test", startTime: "12:00:00", endTime: "13:00:00", startRecur: "2022-03-02", endRecur: "2022-03-02", }, ], }); calendar.render(); }); </script> </head> <body> <div id='calendar'></div> <script> const events = [ { title: "Test 2", startTime: "10:00:00", endTime: "11:00:00", startRecur: "2022-03-03", endRecur: "2022-03-03", }, ]; document.getElementById('calendar').fullCalendar('updateEvents', events); </script> </body> </html> Con la segunda etiqueta de script trato de actualizar los eventos. Esto se activará más tarde en una función separada. El script no está actualizando los eventos. De alguna manera entiendo que HTMLElement no tiene una propiedad fullCalendar , pero no entiendo qué debo hacer más. ¿Qué debo hacer para actualizar los eventos usando JavaScript estándar?
Algunos problemas con su intento:
document.getElementById('calendar') es el objetivo incorrecto al intentar actualizar el calendario. Eso obtendría el elemento HTML DOM que contiene el HTML utilizado para representar el calendario. Pero eso no es lo mismo que el objeto JavaScript fullCalendar que representa el calendario en el código y contiene todas sus llamadas a métodos, propiedades, etc. El objeto modelo del calendario y su representación HTML son dos cosas separadas.
.fullCalendar(... tampoco es correcto. Esa es la sintaxis heredada de fullCalendar v3 e inferior, cuando se implementó como complemento de jQuery. (Supongo que tal vez encontró un ejemplo antiguo en línea y no verificó la documentación actual).
En v5 no hay un equivalente directo del método 'updateEvents' que se encuentra en v3 de fullCalendar de todos modos. Dado que está utilizando una matriz estática de eventos en lugar de una fuente de eventos dinámica, para "actualizarlos" necesita obtener todos los eventos u obtener el evento específico que le interesa , y en cada evento que desea modificar luego debe establecer las propiedades necesarias según sus requisitos. O puede eliminar el evento y agregar uno nuevo . Pero en lugar de todo eso, probablemente sería mucho más fácil usar una fuente de eventos , que luego puede agregar/eliminar/actualizar dinámicamente (y así poder modificar todos sus eventos a la vez).
La variable de calendar que, en su código, contiene el objeto fullCalendar producido al ejecutar new FullCalendar.Calendar , y que debe orientar para su propósito, solo está dentro del alcance de la devolución de llamada DOMContentLoaded donde se declaró. El código en el segundo bloque <script> que ha mostrado parece ejecutarse inmediatamente cuando se carga la página, por lo que actualmente esto sucedería incluso antes de que se haya creado el calendario. No está claro cuándo realmente desea que se ejecute (ya que reemplazar inmediatamente todos los eventos con los que inicializó el calendario parece un poco inútil), así que dejaré que usted llene el vacío. Pero puede hacer que el objeto de calendar tenga un alcance global simplemente declarando var calendar; antes de la document.addEventListener('DOMContentLoaded', function() { y luego escribir calendar = new FullCalendar.Calendar(calendarEl, { (es decir, sin la var dentro de él.