突出显示特定日期

Question

我想强调某些日子（通过我可以根据自己的喜好设计的AJAX Feed获得），然后能够捕捉这些日子的点击事件：

我已经看过events handler，但它显然是为了展示个别事件，我不确定是否可以调整它来做我想要的事情。你能找到一种方法来为那些日子添加一个类名，然后用CSS设置它吗？

我正在使用FullCalendar v2.3.2（升级实际上不是一个选项，因为它已经在网站上使用了。）

Answer 1

我已修改为假装ajax调用，...基本上等待1秒，好像在做一个ajax调用等，然后重新渲染。

唯一不好的是我如何完成刷新，可能有更好的方法。渲染方法不会重新渲染视图。

然后，您可以根据从ajax获得的数据进行修改以执行其他操作。

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' />


<div id='calendar'></div>

＆＃13;

errorHandler

＆＃13;

＆＃13;

＆＃13;

Answer 2

我已经编写了这个丑陋的黑客，这主要是概念上的一个证明，它揭示了我对FullCalendar API的深刻无知，并且仍然需要大量优化（例如，我们应该删除对不再存在的单元格的引用）。 p>

我正在滥用初始dayRender执行来将单元格存储在自定义变量中。然后我可以根据自己的喜好访问该变量，并将我选择的任何jQuery函数应用于链接单元格，这是一个很好的旧jQuery对象。

var days = {};
$('#calendar').fullCalendar({
    dayRender: function (date, cell) {
        days[date.toISOString()] = cell;
    },
    events: function(start, end, timezone, callback){
        // Emulated AJAX response
        var data = [
            start.add(1, "days").format("YYYY-MM-DD"),
            start.add(2, "days").format("YYYY-MM-DD"),
            start.add(5, "days").format("YYYY-MM-DD")
        ];
        $.map(data, function(elementOfArray){
            days[elementOfArray].addClass("has-stuff");
            callback([]);
        });
    }
});

.has-stuff {
    background-color: yellow !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' />


<div id='calendar'></div>

除了优化之外，它还需要额外的工作来在突出显示的日期实施点击事件。

致信Keith的最初片段骨架，错误都是我的。