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

问题描述 投票:21回答:14

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

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

jquery date fullcalendar
14个回答
30
投票

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

您可以在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
    }
  },

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


1
投票

这就是我目前正在使用的

还添加了.add()函数,以便用户无法在同一时间添加事件

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

1
投票

我一直在使用validRange选项。

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


1
投票
*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

 }

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

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


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

我已经尝试了以上所有问题但不适合我

如果任何其他答案适合您,您可以试试这个。

谢谢


24
投票

我喜欢这种方法:

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

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

Unselect method


9
投票

感谢this answer,我找到了以下解决方案:

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

4
投票

你可以结合:

- 如上所述,通过CSS隐藏文本

-disable PREV button on current month

-dayck dateClick / 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
    }
}

4
投票

在FullCalendar v3.0中,有属性selectAllow

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

2
投票

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

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

请享用!


1
投票

下面是我现在使用的解决方案:

        select: function(start, end, jsEvent, view) {
            if (moment().diff(start, 'days') > 0) {
                $('#calendar').fullCalendar('unselect');
                // or display some sort of alert
                return false;
            }

1
投票

不需要长程序,只需试一试。

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

给我们当前的日期。


1
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.