Question

我正在使用fullcalendar，我想知道是否有办法让某些日期无法点击。到目前为止，我所拥有的功能将日历上的所有“日期方格”日期与我之前定义的最大日期进行了比较。如果日期超出了最大日期，我会添加一个类来使它们变灰。它们仍然是可点击的。用日历的布局隐藏它们，看起来很糟糕。

            // Grey out the dates that go beyond the maximum availability date 
            var maxParsed = Date.parse(maxDate.toString());
            $("td[data-date]").each(function(){
                var date = $(this).data('date');
                var dateParsed = Date.parse(date);
                if(!isNaN(dateParsed) && dateParsed > maxParsed){
                    $(this).addClass('fc-other-month');
                }
            });

Answer 1

我认为只有css才能处理。在你的CSS上做这个：

.fc-other-month {
  pointer-events: none;
  cursor: default;
}

CSS属性指针 - 事件允许作者控制什么情况（如果有的话）特定的图形元素可以成为鼠标事件的目标。当此属性未指定时，相同 visiblePainted值的特征适用于SVG内容。

您可以在此处了解更多信息：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

如果它不起作用，也许防止默认可以解决问题。

$('.fc-other-month').on('click', function(e) {
   e.preventDefault();
   $(this).css({'pointer-events' : 'none'});
});

=== edit ====

我查看了文档，他们有eventClick。您可以在该功能内检查它是否是一个好日期＆＃34;如果您不想点击，则返回false。

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {

        if ( 1==1 || "this is a day without click feature") { //dummy code
           return false; //prevent clickable function
        }

    }
});

https://fullcalendar.io/docs/mouse/eventClick/

Answer 2

在您不希望被点击的日期，在return false事件（我猜您将其分配给不同的类）上获取jQuery和click的帮助。所以他们不会点击...

FullCalendar - 使日期不可点击

2 个答案: