I am trying use the FullCalendar v5 plugin to add a calendar on my website. I want to fetch the events using AJAX request.
Here is what I have done
let calendarElement = document.getElementById('calendarElement');
let calendar = new FullCalendar.Calendar(calendarElement, {
initialView: 'dayGridMonth',
aspectRatio: 2.0,
headerToolbar: {
left: 'prev,next',
center: 'title',
end: 'dayGridMonth,timeGridWeek,listWeek, today prev,next'
},
weekNumbers: false,
lazyFetching: false,
events: {
url: '/events',
method: 'GET',
startParam: 'start', // I expect this to always be the begin of the month
endParam: 'end', // I expect this to always be the end of the month
failure: function (e) {
console.log(e);
}
}
});
calendar.render();
However, then the values sent to the server seems to have the wrong start/end values. /events?start=StartValue&end=EndValue
If I am looking at events for the month of February, I expect the plugin to sent a GET
request to the server with 2/1/2022 00:00:00
value for the start
and `2/28/2022 23:59:59′ for the end date.
However, the plugin seems to be sending odd range to the server. The plugin send the value 1/30/2022 5:00:00 AM
as start value and 3/13/2022 5:00:00 AM
as end value. My PC time zone is -5 from UTC which explains the 5 hours. But I would expect the end value to be 2/28/2022 not 3/13/2022
How can I fix this issue so that the plugin send the exact range based on the user’s view?