Question

中的上个月按钮

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

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

});

Answer 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"); }
    }
});

Answer 2

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

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

    }
});

Answer 3

FullCalendar与传统的DatePicker不同。无法初始设置要显示的开始日期和结束日期。

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

FullCalendar只是一个日历。其余的由你决定。

Here is an update based on Prasad19sara answer：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();
        }
    }

});

请注意，不推荐使用viewDisplay，不再在V2中使用

Answer 4

这是我的简单解决方案。

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

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

Answer 5

对于使用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"); }
},

Answer 6

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

只需删除＆＃34;上一页＆＃34; ... http://fullcalendar.io/docs/display/header/ 在您的选项中

Answer 7

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

请参阅文档：https://fullcalendar.io/docs/validRange

Answer 8

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

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

Answer 9

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

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

9 个答案: