FullCalendar - 使日期不可点击答案

【问题标题】：FullCalendar - Make date not clickableFullCalendar - 使日期不可点击
【发布时间】：2016-11-18 19:16:20
【问题描述】：

我正在使用 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');
                }
            });

【问题讨论】：

标签： javascript jquery fullcalendar fullcalendar-scheduler

【解决方案1】：

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

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

CSS 属性 pointer-events 允许作者控制在什么情况下情况（如果有的话）一个特定的图形元素可以成为鼠标事件的目标。当未指定此属性时，相同 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'});
});

=== 编辑 ====

我查看了文档，他们有 eventClick。您可以在该函数内部检查它是否是“好日期”，如果您不想被点击，则返回 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/

【讨论】：

这些不起作用。我什至尝试从日广场删除所有类（据我所知，它们只是控制颜色/位置等）并调用 .unbind() 来取消绑定所有事件。仍然可以点击..
你确定吗？我直接在演示（devtools）上添加了pointer-events: none，数字不再可点击。我还强迫用js添加那个css。再试一次

【解决方案2】：

在您不希望被点击的日期，在 click 事件（我猜您为其分配了不同的类）上使用 jQuery 和 return false。所以他们不会对点击采取行动......

【讨论】：