FullCalendar is sending the server an odd start and end value to fetch the events

Question

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?

Here is a picture of the calendar

Look at the month view when the calendar is open. What is the first date which is visible in the view? It's not 1st Feb, is it? It doesn't send the first date of the _month_, it sends the first date which is visible in the view, so that nothing is omitted. Same with the end date. It's entirely logical. — ADyson, Feb 03 '22 at 20:53
If you change the nonCurrentDates setting https://fullcalendar.io/docs/showNonCurrentDates I think it will then ask only for the dates of the month, because it's not intending to show anything on those other days anyway — ADyson, Feb 03 '22 at 20:57

score 0 · Accepted Answer · answered Feb 04 '22 at 16:29

It doesn't send the first date of the month, it sends the first date which is visible in the view, so that nothing is omitted. For February 2022 for example, as per your screneshot, the first visible date is 30th January. Same with the end date.

However if you set the showNonCurrentDates option to false:

showNonCurrentDates: false

in your calendar config, then it will not display any dates outside the current month when using the month view - they will be greyed out. And because no events will be displayed in them, the calendar does not include those dates in the range it sends in the AJAX request parameters - instead it uses the exact start and end of the month.

FullCalendar is sending the server an odd start and end value to fetch the events

1 Answers1