如何在一个特定的日期之后的Fullcalendar中阻止日期 [英] How to block out dates in the Fullcalendar beyond a certain date

问题描述

我将来有一个日期，总是比当前日期提前30天。它存储在Date对象中。我使用这样做：

I have a date in the future which is always 30 days ahead of the current date. It's stored in a Date object. I worked this out using:

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

使用 FullCalendar jQuery插件我想在日历上的任何日期在视觉上遮挡不同的背景颜色，以便用户知道他们无法在这些日子上点击或创建活动。

Using the FullCalendar jQuery plugin I want to visually block out any days past this date on the calendar with a different background colour so a user knows they can't click on them or create an event on those days.

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

What is the best way to do this with the FullCalendar? Maybe disable all dates by default, and only enable for a specific range (from today's date through to 30 days in the future)?

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

I think I can apply a disabled background state to all the cells using the following code:

$(".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天内进行导航：

You can also use the viewRender event and the gotoDate method, to prevent users to navigate farther than 30 days after today :

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

这篇关于如何在一个特定的日期之后的Fullcalendar中阻止日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！