完整日历事件单元格背景颜色

Question

我将Fullcalendar与Google Calendar结合使用，因此据我所知，我无法将类应用于事件。

我想做的应该很简单，我相信答案会涉及eventRender，但我就是无法让它工作。

简单地说：更改包含任何事件的单元格的整个背景色（所有事件都是谷歌日历中的"全天"）。

我试图实现的是一种"可用性"状态；任何事件都"不可用"，即背景颜色为红色。

Answer 1

是的，您可以使用eventRender。您必须找到包含该事件的td。如果您查看完整日历，您会注意到tds具有该特定日期的data-date属性。这就是我们如何找到其中包含事件的td，以便我们可以将背景颜色更改为红色，特别是使用：

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

在本例中，eventRender中的第一行使用moment将事件开始日期格式化为与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>

Answer 2

如果您在多天内发生事件，@MikeSmithDev的答案将不起作用。

如果您有多天的时间，请使用以下javascript：

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

它使用与MikeSmithDev相同的原理，因此您必须使用相同的css。