javascript - 突出显示特定日期

Question

我想突出显示某些日子(通过我可以根据自己的喜好设计的 AJAX feed 获得)，然后能够捕获这些日子的点击事件:

我查看了 events handler但它显然是为了显示单个事件而设计的，我不确定是否可以对其进行调整以执行我想要的操作。你能想出一种方法，只添加一个类名，然后用 CSS 设计它的样式吗？

我正在使用 FullCalendar v2.3.2(升级并不是一个真正的选择，因为它已经在整个网站上使用)。

Answer 1

我已经修改为执行假装ajax调用，..基本上等待1秒，就像执行ajax调用等，然后重新渲染。

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

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

var dtoday = moment().dayOfYear();
var days = [];

function pretendAjax() {
  setTimeout(function () {
    days = [dtoday - 2, dtoday + 2];   
    //force calendar refresh, there might be a better
    //way than below, but will do for now
    $('#calendar').fullCalendar('changeView','basicWeek');
    $('#calendar').fullCalendar('changeView','month');
  }, 1000);
}


$('#calendar').fullCalendar({
  dayRender: function (date, cell) {
    var dofyear = date.dayOfYear();
    if (days.indexOf(dofyear) >= 0) {
      cell.css({backgroundColor: 'pink'});
    }
  },
});

pretendAjax();

<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>