I am trying to interact with Fullcalendar from outside of scope. For example below, I am trying to change the colour of an event. Another example would be to simply display an alert with the current view.
The catch is, that I am using a tool called FileMaker which has the ability to Perform A Function Inside Javascript rather than a button inside of the HTML.
As far as I am aware, I don't have an event listener I can use. Is there a way I can have the calendar render globally?
<!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>
Try moving your changeColour function inside the DOMContentLoaded function and attaching it to the window explicitly
document.addEventListener('DOMContentLoaded', function(){
var calendar = new FullCalendar....
....
window.changeColour = function(id){
var event = calendar.getEventById(id);
event.setProp( color, '#000000' );
}
}
That way it should be able to access calendar