I find this solution that seem like work well. Sure is not best and elegant solution but i'm working with few data and i don't care too much to benchmark and i have only 2 days for develop calendar in custom cms. I stuck for a few hours on .refreshEvents() but seem like to work only with function or json but i can't manipulate data from db in the cms RESTAPI and i need to do in my browser JS.
This is my solution, declare and render calendar in function:
let calendarEl=[] // Global declaration
calendarOption={events: calendarEvent} // Calendar option
async function createCalendar (){
await $.get("/calendar/getAllEvents", function (response) {
refreshEvents(response.data) // fnc manipulate response
})
// Declare calendar
let calendar = new Calendar(calendarEl, calendarOption);
calendar.destroy();
calendar.render();
}
In manipulation function i fetch the end point for update but if the calendarEvent.length>0 i set length of array to 0. This is the only solution that i find working. If you set calendarEvent=[] give me some issue and refresh not work.
function refreshEvents (data){
//calendarEvent=[] This not work
if(calendarEvent.length>0){
// this work
calendarEvent.length = 0
}
for (let i = 0; i < data.length; i++) {
const el = data[i];
// manipulate data
event={
// create event object
}
// update global array
calendarEvent.push(event)
}
}
In the end i call createCalendar() on startup and after insert/update/delete action
$(document).ready(async function () {
await createCalendar ()
.
.
}
Hope this is usefull for someone