Estoy tratando de interactuar con Fullcalendar desde fuera del alcance. Por ejemplo a continuación, estoy tratando de cambiar el color de un evento. Otro ejemplo sería simplemente mostrar una alerta con la vista actual.
El problema es que estoy usando una herramienta llamada FileMaker que tiene la capacidad de realizar una función dentro de Javascript en lugar de un botón dentro del HTML.
Que yo sepa, no tengo un detector de eventos que pueda usar. ¿Hay alguna forma de que el calendario se represente globalmente?
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8' /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.css"></style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.css"></style> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.2/main.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.2/main.min.js"></script> <script> document.addEventListener ( 'DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar ( calendarEl, { plugins: [ 'dayGrid' ] ,events: 'https://fullcalendar.io/api/demo-feeds/events.json' } ); calendar.render(); } ); function changeColour(id) { var event = calendar.getEventById(id); event.setProp( color, '#000000' ); } </script> </head> <body> <div id='calendar-container'> <div id='calendar'></div> </div> </body> </html>Intente mover su función changeColour dentro de la función DOMContentLoaded y adjuntarla a la ventana explícitamente
document.addEventListener('DOMContentLoaded', function(){ var calendar = new FullCalendar.... .... window.changeColour = function(id){ var event = calendar.getEventById(id); event.setProp( color, '#000000' ); } }De esa manera debería poder acceder al calendario.