Fullcalendar limit the display of available months?

Question

I would like to find out how can I limit the fullcalendar to show a three months period and deselectable for the rest of the months like within a datepicker?

E.g. The current month is May 2010, I would only like the calendar to show May and Apr (on clicking of previous month), and Jun (on clicking on next month), the rest of the months would be deselected from user selection.

I am not sure if I missed reading any part on the fullcalendar documentation. Kindly advise. Thank you.

Solution 1

For FullCalendar in version 2 change viewDisplay : function(view) { to viewRender: function(view,element) { (mixed solution from examples at this page):

  $('#calendar').fullCalendar({

       //restricting available dates to 2 moths in future
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth() + 2); //Adjust as needed

            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-next-button").show();
            }

            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
  });

Solution 2

This is based on tauren's answer, but includes the necessary date math and fullcalendar selectors to pull it off (this code uses a range of 12 months):

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 11); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();

      if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Solution 3

I haven't done this, so I'm not sure this will work. But you could at least try and see.

I would probably look at customizing the viewDisplay callback. It receives a View Object that contains a start property, among others. You could use the View object properties to test what view and date the user is looking at and then perform actions based on it.

I'm not sure if fullcalendar works this way, but some plugins will abort an action if you return false from a callback. So you could check the start date and if it is out of your range of acceptable months, then return false to abort the action.

If that doesn't work, inside of viewDisplay you could again check the start date. If the next month or previous month are out of range, then you could use jQuery selectors to grab the prev/next buttons and disable them. That way the user wouldn't be able to switch to an out of range month.

Also, if the user is in an out-of-range month, you could immediate issue a gotoDate command to switch to a valid month.

$('#calendar').fullCalendar({
    viewDisplay: function(view) {
        // maybe return false aborts action? 
        if (view.start > lastDayOfNextMonth) {
            return false;
        }
        // or disable next button if this is last valid month
        if (view.end + oneDay >= lastValidDate) {
            $("#calendar #fc-button-next").attr("disabled","disabled");
        }
        // or gotoDate if view.start is out of range
        if (view.start > lastValidDate) {
           // gotoDate
        }
    }
});

There are many ways to do the logic and date math in there, but I think you could get something working this way.

Solution 4

you can use the option

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            validRange: {
                start: '2017-05-01',//start date here
                end: '2017-07-01' //end date here
            },
            defaultDate: '2017-05-12'
            });

Solution 5

            var academicYearStartDate = new Date('2013/4/10');
            var academicYearEndDate = new Date('2014/4/10');

            viewDisplay: function (view) {
                //========= Hide Next/ Prev Buttons based on academic year date range
                if (view.end > academicYearEndDate) {
                    $("#SchoolCalender .fc-button-next").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-next").show();
                }

                if (view.start < academicYearStartDate) {
                    $("#SchoolCalender .fc-button-prev").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-prev").show();
                }

            }

View more solutions

Comments

[Steven Harlow]

@Foton believe the class names .fc-next-button and .fc-prev-button are now .fc-button-next and .fc-button-prev, respectively

[Newbie]

it gives this error Uncaught TypeError: view.start.getMonth is not a function

[Newbie]

its not working proper in end.setMonth(now.getMonth() + 1);

[Newbie]

remove return false; than its working for end.setMonth(now.getMonth() + 1);

[Shawn Lindstrom]

Using the validRange property is the simplest answer for generic views. Displayed dates before start or after end will not be navigable. See: validRange