如何在完整日历中屏蔽超过特定日期的日期

我有一个将来的日期，它总是比当前日期早 30 天。它存储在 Date 对象中。我使用以下方法解决了这个问题：

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

使用FullCalendar jQuery插件，我想用不同的背景颜色直观地屏蔽日历上超过此日期的任何日期，以便用户知道他们无法在这些日子单击它们或创建事件。

使用完整日历执行此操作的最佳方法是什么？也许默认情况下禁用所有日期，并且只启用特定范围（从今天的日期到未来的 30 天）？

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

$(".fc-widget-content").addClass("disabled");
.disabled .fc-day-content {
    background-color: #123959;
    color: #FFFFFF;
    cursor: default;
}

怎么能做到呢？

使用 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);
        }
    }
    ...
});

这个解决方案怎么样？

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..");
   }
}

在完整日历的新版本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'
  }
});

对于正在寻找定义min-display-date和max-display-date的解决方案的人：（对于完整日历 v2）

$('#calendar').fullCalendar({
    defaultDate: new Date(),
    viewRender: function(view, element) {
        curdate = new Date();
        viewdate = new Date(view.start);
        // PREV - force minimum display month to current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <= 
            new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){
            $('.fc-prev-button').prop('disabled', true);
            $('.fc-prev-button').css('opacity', 0.5);
        } else {
            $('.fc-prev-button').prop('disabled', false);
            $('.fc-prev-button').css('opacity', 1);
        }
        // NEXT - force max display month to a year from current month
        if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >= 
            new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){
            $('.fc-next-button').prop('disabled', true);
            $('.fc-next-button').css('opacity', 0.5);
        } else {
            $('.fc-next-button').prop('disabled', false);
            $('.fc-next-button').css('opacity', 1);
        }
    }
});

这个选择了当前月份的时间段

<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?>
$('#calendar').fullCalendar({
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'today'
            },
            defaultDate: moment(),
            editable: false,
            //height:'auto',
            //weekends: false,
            defaultView: 'agendaWeek', 
            eventLimit: true, 
            events: {
                url: 'php/get-events.php',
                error: function() {
                    $('#script-warning').show();
                }
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
            },
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth()); 
            end.setDate(<?php echo $numerodias; ?>);
            now.setDate(1);
            if ( end < view.end) {
                $("#calendar .fc-next-button").hide();
                return false;
                alert(end);
            }
            else {
                $("#calendar .fc-next-button").show();
            }
            if ( view.start < now) {
                $("#calendar .fc-prev-button").hide();
                return false;
            }
            else {
                $("#calendar .fc-prev-button").show();
            }
        }
        });
    });

用于单击时禁用单元格（版本 2.0）：

dayRender: function( date, cell ) {
     // It's an example, do your own test here
    if(cell.hasClass("fc-other-month")) {
          cell.addClass('disabled');
     } 
},
dayClick: function(date, jsEvent, view) {
    if($(jsEvent.target).hasClass("disabled")){
        return false;
    }
    // Your code
    // ....
}

只需在 Fullcalendar 中添加此代码：

select: function (start, end, jsEvent, view) {
            if (start.isBefore(moment())) {
                $('#calendar').fullCalendar('unselect');
                return false;
            }
            else {
                 var currentDate = moment(start).format('YYYY/MM/DD'));
                 alert(currentDate);
            } 
        }

简单快捷。享受！

相关内容

最新更新

热门标签：