Fullcalendar事件单元格背景颜色

Question

我正在使用带有Google日历的Fullcalendar,因此就我所知,我无法将某个类应用于某个事件.

我想要做的应该是非常简单,我确信答案将涉及eventRender,但我无法让它工作.

简单地说:更改包含任何事件的单元格的整个背景颜色(所有事件都是Google日历中的"全天").

我想要实现的是"可用性"状态; 任何事件都是"不可用",即背景颜色为红色.

Answer 1

是的,你可以做到eventRender.您必须找到td包含该事件的内容.如果您检查fullCalendar,您会注意到该特定日期tds的data-date属性.这就是我们将如何找到td其中包含事件的方式,以便我们可以将背景颜色更改为红色,具体使用:

eventRender: function (event, element) {
    var dataToFind = moment(event.start).format('YYYY-MM-DD');
    $("td[data-date='"+dataToFind+"']").addClass('activeDay');
}

在此示例中,第一行eventRender使用时刻将事件开始日期格式化为匹配data-date属性值所需的格式.第二行找到一个属性值为td的data-date属性,dataToFind然后添加一个我们调用的类activeDay,假设你在头/样式表中添加这样的东西:

<style>
    .activeDay {background-color:#ff0000 !important;}
</style>

$('#fullCal').fullCalendar({
  events: [{
    title: 'Main Event 1',
    start: new Date(),
    end: new Date(),
    allDay: false
  }, {
    title: 'Main Event 2',
    start: '2014-10-03 19:00',
    end: '2014-10-03 19:30',
    allDay: false
  }, {
    title: 'Main Event 3',
    start: '2014-10-15 17:00',
    end: '2014-10-15 18:00',
    allDay: false
  }, {
    title: 'Main Event 4',
    start: '2014-11-30 7:00',
    end: '2014-11-30 18:00',
    allDay: false
  }, ],

  header: {
    left: '',
    center: 'prev title next',
    right: ''
  },
  eventRender: function(event, element) {
    var dataToFind = moment(event.start).format('YYYY-MM-DD');
    $("td[data-date='" + dataToFind + "']").addClass('activeDay');
  }
});

.activeDay {
  background-color: #ff0000 !important;
}

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

<p>Example:</p>
<div id="fullCal"></div>