29

问题是，如何在 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;
}

我真的被这个问题困住了。请有人帮助我。谢谢...

4

16 回答 16

35

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

您可以在您的选择功能中添加此代码。

 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
    }
  },

我希望它会帮助你。

于 2013-02-21T23:15:59.177 回答
31

我喜欢这种方法：

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

它基本上会在“现在”之前的时间禁用选择。

取消选择方法

于 2016-04-26T18:39:11.447 回答
15

感谢这个答案，我找到了以下解决方案：

$('#full-calendar').fullCalendar({
    selectable: true,
    selectConstraint: {
        start: $.fullCalendar.moment().subtract(1, 'days'),
        end: $.fullCalendar.moment().startOf('month').add(1, 'month')
    }
});
于 2017-01-30T12:45:36.927 回答
7

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

selectAllow: function(info) {
    if (info.start.isBefore(moment()))
        return false;
    return true;          
}
于 2018-08-07T20:27:47.047 回答
7

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

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

享受！

于 2018-11-08T16:39:46.247 回答
5

您可以组合：

- 如问题所述，通过 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
    }
}
于 2013-02-21T09:18:36.363 回答
5

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

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

首先设置您想要成为下限的日期

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

然后使用 包含范围validRange。简单地省略end日期。

 validRange: {
    start: today
 }
于 2019-10-14T11:42:16.090 回答
3

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

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

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

于 2018-05-21T07:33:56.483 回答
1

以下是我现在使用的解决方案：

        select: function(start, end, jsEvent, view) {
            if (moment().diff(start, 'days') > 0) {
                $('#calendar').fullCalendar('unselect');
                // or display some sort of alert
                return false;
            }
于 2015-11-23T20:33:34.953 回答
1

不需要很长的程序，试试这个。

checkout.setMinSelectableDate(Calendar.getInstance().getTime());    
Calendar.getInstance().getTime()

给我们当前日期。

于 2017-08-13T16:06:00.640 回答
1

这是我目前正在使用的

还添加了 .add() 函数，因此用户无法在同一时间添加事件

select: function(start, end, jsEvent, view) {
               if(end.isBefore(moment().add(1,'hour').format())) {
               $('#calendar').fullCalendar('unselect');
               return false;
             }
于 2018-06-26T15:02:34.593 回答
1

你可以使用这个：

var start_date= $.fullCalendar.formatDate(start,'YYYY-MM-DD');

var today_date = moment().format('YYYY-MM-DD');

if(check < today)
{
    alert("Back date event not allowed ");
    $('#calendar').fullCalendar('unselect');
    return false
}
于 2018-06-27T08:58:22.623 回答
1

我一直在使用validRange选项。

validRange: { start: Date.now(), end: Date.now() + (7776000) // sets end dynamically to 90 days after now (86400*90) }

于 2018-07-28T12:22:13.777 回答
0

在 Fullcalendar 中，我通过 dayClick 事件实现了它。我认为这是简单的方法。

这是我的代码..

 dayClick: function (date, cell) {
              var current_date = moment().format('YYYY-MM-DD')
              // date.format() returns selected date from fullcalendar
              if(current_date <= date.format()) {
                //your code
              }
            }

希望它有助于过去和未来的日期将无法选择..

于 2018-10-26T06:31:17.637 回答
0

如果任何一个答案不适合你，请试试这个，我希望它对你有用。

 select: function(start, end, allDay) {                

              var check = formatDate(start.startStr);
              var today = formatDate(new Date());

              if(check < today)
              {
                 console.log('past');                     
              }
              else
              {                    
                console.log('future');
              }
}

并为日期格式创建函数，如下所示

function formatDate(date) {
      var d = new Date(date),
          month = '' + (d.getMonth() + 1),
          day = '' + d.getDate(),
          year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
  }

我已经尝试了上述所有问题，但对我不起作用

如果任何其他答案对你有用，你可以试试这个。

谢谢

于 2019-04-18T10:03:02.453 回答
0

只需添加此 if 语句

 select(info) {
      if (moment(info.start).format() > moment().format()) {
       //your code here
      } else {
        toast.error("Please select valid date");
      }
    },

于 2022-03-04T10:39:09.327 回答