Question

我将Fullcalendar与Google日历结合使用，因此，就我所知，我无法将某个课程应用于某个活动。

我想要做的事情应该非常简单，我确信答案将涉及eventRender，但我无法让它发挥作用。

简单地说：更改包含任何事件的单元格的整个背景颜色（所有事件都是＆＃34;全天＆＃34;在Google日历中）。

我想要实现的是＆＃34;可用性＆＃34;州;任何事件都是＆＃34;不可用＆＃34;即背景颜色为红色。

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>

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。

Fullcalendar事件单元格背景颜色

2 个答案: