Question

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

我希望用户不允许点击/选择过去的日期。

enter image description here

以下是我尝试在事件呈现上实现的一些Google搜索代码段：

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: 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;
    }
}

它基本上会在＆＃34;现在＆＃34;。

之前禁用选择

Unselect method

Answer 3

感谢this answer，我找到了以下解决方案：

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

Answer 4

你可以结合使用：

- 如问题所述，通过CSS隐藏文字

- disable PREV button on current month

- 查看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 5

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

descriptors = f.compute(img, keypoints)

Answer 6

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

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

享受！

Answer 7

这个问题的旧答案还可以...

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

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

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

然后使用validRange包含范围。只需省略end日期。

 validRange: {
    start: today
 }

Answer 8

不需要长程序，只需尝试一下。

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

给我们当前日期。

Answer 9

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

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

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

Answer 10

这是我目前正在使用的

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

select: function(start, end, jsEvent, view) {
               if(end.isBefore(moment().add(1,'hour').format())) {
               $('#calendar').fullCalendar('unselect');
               return false;
             }

Answer 11

*You can use this*

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

 }

Answer 12

我一直在使用validRange选项。

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

Answer 13

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

这是我的代码。

protected void Page_Load(object sender, EventArgs e)
{
    //not here
    GridViewUserList.DataSource = source;
    GridViewUserList.DataBind();

    if (IsPostBack == false)
    {
        //but bind data here...
        GridViewUserList.DataSource = source;
        GridViewUserList.DataBind();
    }
}

希望它可以帮助您选择过去和将来的日期。

Answer 14

如果任何一个答案都不适合您，请尝试此操作，希望它对您有用。

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

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

如果其他答案对您有用，您可以尝试一下。

谢谢

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

14 个答案: