fullcalendar: how can i get the first and last day of the relevant viewed month (and not the days of of the prev \ next month)

i want to know what is the first day and the last day of the main month viewed in fullcalendar.

here is the relevant month view:

     events: function (start, end, timezone, callback) { //custom events function to be called every time the view changes
          alert (start.format());
          alert (end.format());
     },

when i run this code on this month (april 2017), i get: start.format()=2017-03-26 end.format()= 2017-05-07 and i would like to get the following dates: start: 2017-04-01 end: 2017-04-30

is there any way for me to get this dates inside the event function?

many thanks

p.s

i would not like to use the "showNonCurrentDates: false" option

Solution 1:

There's no direct way to get this value via the "events" callback, but you can use a slightly kludgy workaround:

The viewRender callback gives you access to the "view" object of the current view, which contains the intervalStart and intervalEnd properties (see https://fullcalendar.io/docs/v3/view-object) which relate to the interval the view is trying to represent. In a month view, this will be the start and end of the month. If you capture these into variables with a higher scope than your calendar, you can then re-use them in the events and/or eventsAfterAllRender callbacks, as needed.

var intervalStart, intervalEnd; //variables with higher scope level

$('#calendar').fullCalendar({
   //...your options here...
    viewRender: function (view, element)
    {
        intervalStart = view.intervalStart;
        intervalEnd = view.intervalEnd;
    },
    events: function(start, end, timezone, callback) {
        console.log(intervalStart.format("YYYY-MM-DD"));
        console.log(intervalEnd.format("YYYY-MM-DD"));
        //...etc
    }
});

Note that intervalEnd is exclusive, so if the month is April, the intervalEnd will be given as 1st May.

Having demonstrated that though, it seems neater just to use the built-in showNonCurrentDates:false option, as in your earlier question.

Solution 2:

Add this setting showNonCurrentDates: false,. With this setting, dates that do not belong to the current month will not be shown. From you event callbacks the first day of the current month and the first day of the next month will be shown as the start and end respectively

 $('#calendarLoansByRequestDate').fullCalendar({
            // Other settings
            showNonCurrentDates: false,
            events: function (start, end, timezone, callback) { //custom events function to be called every time the view changes
                alert(start.format());
                alert(end.format());
            }
 });