I have the following code, that uses FullCalendar and renders a calendar:
<!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>
With the second script tag I try to update the events. This will be triggered later in a separate function.
The script is not updating the events. I somehow understand, that the HTMLElement does not have a property fullCalendar, but I don't understand, what I need to do else. What do I need to do to update the events using vanilla JavaScript?
A few issues with your attempt:
document.getElementById('calendar') is the wrong thing to target when trying to update the calendar. That would get the HTML DOM element which contains the HTML used to render the calendar. But that isn't the same as the fullCalendar JavaScript object which represents the calendar in code and contains all of its method calls, properties etc. The calendar's model object and it's HTML representation are two separate things.
.fullCalendar(... isn't correct either. That's legacy syntax from fullCalendar v3 and below, when it was implemented as jQuery plugin. (I guess maybe you found an old example online and didn't check against current documentation.)
In v5 there's no direct equivalent of the 'updateEvents' method found in v3 of fullCalendar anyway. Since you're using a static array of events rather than a dynamic event source, to "update" them you need to either get all the events or get the specific event you're interested in, and on each event which you want to alter you then must set the necessary properties as per your requirements. Or you could remove the event and add a brand new one. But instead of all that it would probably be a lot easier to use an event source instead, which you can then add/remove/refresh dynamically (and thus be able to alter all of its events at once).
The calendar variable which, in your code, contains the fullCalendar object produced by executing new FullCalendar.Calendar, and which you need to target for your purpose, is only in scope within the DOMContentLoaded callback where it was declared. The code in the second <script> block you've shown appears to run immediately when the page loads, so currently this would happen before the calendar has even been created. It's unclear when you actually want this to run (since immediately replacing all the events you initialised the calendar with seems a bit pointless), so I'll leave that up to you to fill in the gap. But you can make the calendar object in global scope by simply declaring var calendar; before the document.addEventListener('DOMContentLoaded', function() { line, and then writing calendar = new FullCalendar.Calendar(calendarEl, { (i.e. without the var within it.