如何在特定日期之后阻止Fullcalendar中的日期

Question

我的未来日期总是比当前日期提前30天.它存储在Date对象中.我用这个来解决这个问题:

var currentDate = new Date();
var futureBlockDate = new Date();
futureBlockDate.setDate(currentDate.getDate() + 30);

使用FullCalendar jQuery插件,我希望在日历上以不同的背景颜色直观地阻止此日期之后的任何日子,以便用户知道他们无法点击它们或在那些日子创建活动.

使用FullCalendar执行此操作的最佳方法是什么？也许默认情况下禁用所有日期,并且只启用特定范围(从今天的日期到将来的30天)？

我想我可以使用以下代码将禁用的背景状态应用于所有单元格:

$(".fc-widget-content").addClass("disabled");

.disabled .fc-day-content {
    background-color: #123959;
    color: #FFFFFF;
    cursor: default;
}

怎么做到呢？

Answer 1

使用dayRender选项将"禁用"类添加到超出范围的日期.

$('#calendar').fullCalendar({
    ...
    dayRender: function(date, cell){
        if (date > maxDate){
            $(cell).addClass('disabled');
        }
    }
    ...
});

您还可以使用viewRender事件和gotoDate方法来阻止用户在今天之后的30天内导航:

$('#calendar').fullCalendar({
    ...
    viewRender: function(view){
        if (view.start > maxDate){
            $('#calendar').fullCalendar('gotoDate', maxDate);
        }
    }
    ...
});

Answer 2

这个解决方案怎么样？

dayClick: function(date, allDay, jsEvent, view) {
   var myDate = new Date();

   //How many days to add from today?
   var daysToAdd = 15;

   myDate.setDate(myDate.getDate() + daysToAdd);

   if (date < myDate) {
       //TRUE Clicked date smaller than today + daysToadd
       alert("You cannot book on this day!");
   } else {
       //FLASE Clicked date larger than today + daysToadd
       alert("Excellent choice! We can book today..");
   }

}

Answer 3

全日历新版本V4，有很多更新，您可以找到适合您需要的设置

限制用户可以导航到的日期以及事件可以进行的位置。

// constrain to a discrete range
var calendar = new Calendar(calendarEl, {
  defaultView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01',
    end: '2017-06-01'
  }
});

// constrain to an open-ended range
var calendar = new Calendar(calendarEl, {
  defaultView: 'dayGridMonth',
  validRange: {
    start: '2017-05-01'
  }
});