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

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

• javascript
• jquery
• css
• ajax
• fullcalendar

• 1 With release of v4, it is much easier. <viewObject>.currentStart() and <viewObject>.currentEnd(). For example, datesRender: function(info) { console.log(info.view.currentStart.format("YYYY-MM-DD")); console.log(info.view.currentEnd.format("YYYY-MM-DD")); } – Fr0zenFyr Commented Aug 8, 2019 at 6:40
• 1 @Fr0zenFyr You are awesome, solved my problem and saved my life. I was searching this solution for 1 hour. Thanks dear. – Kamlesh Commented Sep 13, 2020 at 8:48
• Glad it helped you @Kamlesh. Cheers! – Fr0zenFyr Commented Oct 15, 2020 at 9:55

3 Answers 3

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.

I achieved the desired result by using the activeStart and activeEnd view object properties.

https://fullcalendar.io/docs/view-object

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());
            }
 });