I'm trying to make it so that when my program receives new JSON data from a holidays API, it can replace the old data from the API with the new data.
I've tried to declare the array as empty in the beginning, but this didn't work. I've also tried to empty the array if it was > 1 but this didn't work either.
My code:
// Declares an empty array
var eventsArr = [];
console.log(eventsArr);
// Pushes the API data to an object
for(i = 0; i < result['data']['holidays'].length; i++){
let date = result['data']['holidays'][i]['date']['iso'];
eventsArr.push({
"startDate": new Date(date),
"endDate" : new Date(date),
"summary" : result['data']['holidays'][i]['description']
});
}
// Uses the pushed data to add the dates to the calendar
$("#calendar").simpleCalendar({
// Events displayed
displayEvent:true,
// Dates of the events
events: eventsArr
});
I wrote a snippet you can try: it initializes the calendar when random events, and everytime you click on "reload" you refresh the 3 random elements. You can skip the "Mocking of your API" part as it's just to make my snippet work with new data everytime.
Basically, what you have to do is having a function for fetching the events and including them in the calendar. This function can then be called everytime you need it, instead of fetching the events only once when the page is opened.
After having fetched the events, this function empties the calendar and put the new data inside the calendar.
And last of all, coming from the jQuery world a long time ago, I strongly suggest to migrate to VueJS, as you will build more complex apps more easily.
/*
Mocking of your API
*/
// to wait a bit
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// to create random dates
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
// to build an event
function mockEvent() {
const date = randomDate(new Date(2021, 9, 1), new Date(2021, 9, 31));
return {
startDate: date,
endDate: date,
summary: `EVENT ${Math.floor(100*Math.random())}`,
}
}
// to call the API
async function mockAPI() {
console.log('API call');
await sleep(3000);
return Array.from({length: 3}, (x) => mockEvent());
}
/*
Function to execute when you want to
initialize your calendar
*/
const initializeCalendar = async () => {
console.log('Calendar initialization');
/*
Here you call your API
*/
const events = await mockAPI();
console.log('Calendar filling');
let container = $("#calendar");
container.empty().data('plugin_simpleCalendar', null).simpleCalendar({
displayEvent: true,
events: events
});
}
// when you want to fetch elements
async function reload() {
console.log('Reloading');
await initializeCalendar();
}
/*
to properly initialize the calendar
*/
$(document).ready(function() {
console.log('FIRST INIT');
initializeCalendar();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://www.jqueryscript.net/demo/animated-event-calendar/dist/simple-calendar.css" rel="stylesheet"/>
<script src="https://www.jqueryscript.net/demo/animated-event-calendar/dist/jquery.simple-calendar.js"></script>
<button onclick="reload()">
Reload
</button>
<div id="calendar"></div>