javascript 如何在完整日历插件中禁用上个月

how to disable previous month in Full Calendar Plugin

提问by Puzzled Boy

I want to disable previous month button from full calander

我想从完整的日历中禁用上个月的按钮

Current month is April. When i clicked on previous button then calendar is showing previous March month. should not be happened.

当前月份是四月。当我点击上一个按钮时，日历会显示上一个三月的月份。不应该发生。

http://jsfiddle.net/6enYL/

http://jsfiddle.net/6enYL/

$(document).ready(function () {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title'
        },
        selectable: true,
        selectHelper: true,
        editable: true
    });

});

采纳答案by Milan Stojanovic

Yep, I've modified your fiddle with lewsid's answer, and it works. http://jsfiddle.net/6enYL/1/

是的，我已经用lewsid的答案修改了你的小提琴，并且它有效。 http://jsfiddle.net/6enYL/1/

    jQuery('#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"); }
    }
});

回答by Tarun Gupta

Disable past dates and view starts from today

禁用过去的日期并从今天开始查看

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    firstDay :moment().weekday(),
    viewRender: function(currentView){
        var minDate = moment();
        // Past
        if (minDate >= currentView.start && minDate <= currentView.end) {
            $(".fc-prev-button").prop('disabled', true); 
            $(".fc-prev-button").addClass('fc-state-disabled'); 
        }
        else {
            $(".fc-prev-button").removeClass('fc-state-disabled'); 
            $(".fc-prev-button").prop('disabled', false); 
        }

    }
});

回答by Piotr Kula

FullCalendar is not like a traditional DatePicker. There is no way to initially setup the start and end dates of what you want to show.

FullCalendar 不像传统的 DatePicker。最初无法设置要显示的内容的开始和结束日期。

You have to attach to viewRenderevent and manipulate the calendar with logic of your own. So if the dates are less than what you want you attach a class to that tile of 'disabled' for example. And also disable the previous button your self. You also then have to re-enable the previous button on the next month. Thanks to this kind of API you build your own custom calendar, but it can take time.

您必须附加到viewRender事件并使用您自己的逻辑操作日历。因此，如果日期小于您想要的日期，例如，您可以将一个类附加到“禁用”的那块瓷砖上。并且还自己禁用上一个按钮。然后，您还必须在下个月重新启用上一个按钮。借助这种 API，您可以构建自己的自定义日历，但这可能需要时间。

FullCalendar is just a calendar. The rest is up to you.

FullCalendar 只是一个日历。剩下的就看你了。

Here is an update based on Prasad19sara answer: http://jsfiddle.net/6enYL/2/

这是基于 Prasad19sara 答案的更新：http: //jsfiddle.net/6enYL/2/

var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title'         
    },
    selectable: true,
    selectHelper: true,         
    editable: true,
    viewDisplay: function (view) {
        //========= Hide Next/ Prev Buttons based on date range
        if (view.end > endDate) {
            $("#calendar .fc-button-next").hide();
            return false;
        }
        else {
            $("#calendar .fc-button-next").show();
        }

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

});

Please be aware that viewDisplay is deprecated and will no longer be used in V2

请注意 viewDisplay 已弃用，将不再用于 V2

回答by Christopher Lamm

This is my simple solution.

这是我的简单解决方案。

Place this code in the renderView function (around line 368 in version 1.5.4)) before ignoreWindowResize--; near the end of the function.

将此代码放在 renderView 函数中（版本 1.5.4 中的第 368 行附近））在 ignoreWindowResize-- 之前；接近函数的结尾。

var lammCurrentDate = new Date();
var lammMinDate = new Date( lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0);
if (currentView.start <= lammMinDate){
    header.disableButton('prev');
} else {
    header.enableButton('prev');
}

回答by cmac

header:{
  left:   'title',
  center: '',
  right:  'today prev,next'
},

Just remove "prev"... http://fullcalendar.io/docs/display/header/in your options

只需 在您的选项中删除“prev”... http://fullcalendar.io/docs/display/header/

回答by Joey Chan

For those using the FullCalendar.io version 2, you may use the following code

对于使用 FullCalendar.io 版本 2 的用户，您可以使用以下代码

viewRender: function(view) {
 var now = new Date(); 
 var end = new Date();
 end.setMonth(now.getMonth() + 1); 
 
 
 var cal_date_string = view.start.format('MM')+'/'+view.start.format('YYYY');
 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-prev-button').addClass("fc-state-disabled"); }
 else { jQuery('.fc-prev-button').removeClass("fc-state-disabled"); }

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

回答by edi

$('#calendar').fullCalendar({
    businessHours: {
        start: '10:00', // a start time 
         end: '22:00', // an end time 
         dow: [ 1, 2, 3, 4, 5 ]
         // days of week. an array of zero-based day of week integers (0=Sunday)
    },
    hiddenDays: [ 0, 6 ],
    defaultView: 'agendaWeek',
    viewRender: function(view) { 
        var now = new Date();
        var end = new Date();
        end.setMonth(now.getMonth() + 2); 
        //========= Hide Next/ Prev Buttons based on date range
        if (view.end > 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();
        }   
    }
});

回答by guylabbe.ca

If you have looking for a more recent solution (v4-compatible), look for validRange

如果您正在寻找更新的解决方案（与 v4 兼容），请寻找 validRange

See documentation : https://fullcalendar.io/docs/validRange

查看文档：https: //fullcalendar.io/docs/validRange

回答by mesosteros

In version v2 simply set the header without the option. Like this for example:

在版本 v2 中，只需设置标题而不带选项。像这样例如：

        header: {
            center: "title",
            right: "month,agendaWeek,agendaDay"
        },