I am trying to display previous events in fullCalendar. But there's a problem: after you define an event and then refresh the page the events disappear.
Is there any way that I can fetch all the details from all the previous events and display them on the calendar?
This is my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'dayGridMonth',
selectable: true,
headerToolbar: {
left: 'prev,next',
center: 'title'
},
editable: true,
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if (info.event.url) {
window.open(info.event.url);
}
},
dateClick: function(info) {
endDate = info.dateStr;
localStorage.enddate = info.dateStr;
setTimeout(cal, 1000);
function cal() {
if (imgUrl !== ' ' && today <= endDate) {
calendar.addEvent({
title : `Post ${l++}`,
url : `${imgUrl}`,
start : `${today}`,
end : `${endDate}`
});
imgUrl = ' ';
} else if (today > endDate) {
alert('Please select a date that is in the future!');
} else {
return;
}
}
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
const date1 = new Date(`${today}`);
const date2 = new Date(`${endDate}`);
seconds = date2 - date1;
console.log(seconds);
}
});
calendar.render();
});