I am having a problem displaying events in my calendar. I'm taking data from an events.json file and adding an event. It displays one day too short for me. For example, the event 09.08-15.08 is displayed only until 14.08. 08.09-09.10 is correct, 24.09-26.09 is too short 01.09-05.09 is too short etc.
Why is this happening? And how to fix it?
Here is live preview of problem: https://mawk.bieda.it/
Here is my code:
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
/*locale: 'pl',*/
firstDay: 1,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'prevYear,nextYear'
},
validRange: {
start: '2021-01-01',
end: '2022-01-01'
},
selectable: true,
select: function (info) {
alert('Selected ' + info.startStr + ' to ' + info.endStr);
},
events: {
url: '/events.json',
extraParams: function () {
return {
cachebuster: new Date().valueOf()
};
}
},
});
calendar.render();
});
</script>
<div id='calendar' style="height: 600px; width: 600px; margin: auto;"></div>
This is event.json:
[
{
"title": "09.08-15.08",
"start": "2021-08-09",
"end": "2021-08-15"
},
{
"title": "08.09-09.10",
"start": "2021-09-08",
"end": "2021-09-10"
},
{
"title": "24.09-26.09",
"start": "2021-09-24",
"end": "2021-09-26"
},
{
"title": "01.09-05.09",
"start": "2021-09-01",
"end": "2021-09-05"
},
{
"title": "28.09-03.10",
"start": "2021-09-28",
"end": "2021-10-03"
},
{
"title": "01.12-03.10",
"start": "2021-12-01",
"end": "2021-12-31"
}
]
As per the official documentation:

So if you want it to behave as if the end date is inclusive you have to set the end date to one day later.