如何在fullcalendar中使过去的日期无法选择？

Question

问题是,如何在fullcalendar的月/周视图中禁用PAST DATES上的可选项.

我想用户不允许点击/选择过去的日期.

这是我试图在事件呈现上实现的一些谷歌搜索代码片段:

selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
        var appdate = jQuery.datepicker.formatDate('<?php echo $DPFormat; ?>', new Date(start));
        jQuery('#appdate').val(appdate);
        jQuery('#AppFirstModal').show();
    },
    eventRender: function(event, element, view)
    {
        var view = 'month' ;
       if(event.start.getMonth() !== view.start.getMonth()) { return false; }
    },

但它不起作用.

我也尝试过贬低CSS,这有助于我隐藏过去的日期文本,但是可选择仍在使用过时日期框.

.fc-other-month .fc-day-number {
     display:none;
}

我真的很困惑这个问题.请有人帮助我.谢谢...

Answer 1

我已经在我的完整日历中完成了这项工作,并且它运行良好.

您可以在select函数中添加此代码.

 select: function(start, end, allDay) {
    var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
    if(check < today)
    {
        // Previous Day. show message if you want otherwise do nothing.
        // So it will be unselectable
    }
    else
    {
        // Its a right date
        // Do something
    }
  },

我希望它会对你有所帮助.

Answer 2

我喜欢这种方法:

select: function(start, end) {
    if(start.isBefore(moment())) {
        $('#calendar').fullCalendar('unselect');
        return false;
    }
}

它将基本上禁用"现在"之前的时间选择.

取消选择方法

Answer 3

感谢这个答案,我找到了以下解决方案:

$('#full-calendar').fullCalendar({
    selectable: true,
    selectConstraint: {
        start: $.fullCalendar.moment().subtract(1, 'days'),
        end: $.fullCalendar.moment().startOf('month').add(1, 'month')
    }
});

Answer 4

在 fullcalendar 3.9 中，您可能更喜欢validRange function parameter：

validRange: function(nowDate){
    return {start: nowDate} //to prevent anterior dates
},

缺点：这也会隐藏该日期时间之前的事件

Answer 5

在 FullCalendar v3.0 中，有属性selectAllow：

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}

Answer 6

我试过这种方法，效果很好。

$('#calendar').fullCalendar({
   defaultView: 'month',
   selectable: true,
   selectAllow: function(select) {
      return moment().diff(select.start) <= 0
   }
})

享受！

Answer 7

您可以组合：

-hide text by CSS 正如所提到的那样

-禁用当前月份的 PREV 按钮

- 检查 dayClick/eventDrop 上的日期等：

dayClick: function(date, allDay, jsEvent, view) {
    var now = new Date();
    if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){
        alert('test');
    }
    else{
         //do something
    }
}

Answer 8

这个问题的旧答案是好的......

但是，官方文档提出了一个新的、更简洁的解决方案：

先设置你想成为下界的那一天

 var today = new Date().toISOString().slice(0,10);

然后使用validRange. 只需省略end日期。

 validRange: {
    start: today
 }