Fullcalendar事件单元格背景颜色 [英] Fullcalendar event cell background color

问题描述

我想要的是什么？做的应该很简单，我相信答案将涉及eventRender，但我不能得到它的工作。

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

我试图达到的是可用性状态;任何事件都是不可用的，即背景色为红色。

解决方案

是的，您可以使用 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'）; 
 
 
 
 $ b $ p 
 $ b 
在本例中， eventRender 使用时刻将事件开始日期格式化为匹配 data-date 属性值所需的格式。第二行使用 data-date 属性找到一个 td ，其值为 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'，结束：'2014-10-03 19:30'，allDay：false}，{title：'主赛事3'，开始：'2014-10-15 17:00'，结束：'2014-10 -15 18:00'，allDay：false}，{title：'主要活动4'，开始：'2014-11-30 7:00'，结束：'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 =stylesheet/>< script src =https：// cdnjs。 cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js\"></script><p>示例：< / p>< div id =fullCal>< / div>  

I'm using Fullcalendar with a Google Calendar so I can't apply a class to an event as far as I'm aware.

What I want to do should be quite simple and I'm sure the answer will involve eventRender but I just can't get it working.

Simply: change the entire background color of the cell that contains any event (all events are "all day" within the Google Calendar).

What I'm trying to achieve is an "availability" state; any event is "unavailable" i.e. background color red.

解决方案

Yes, you can do it with eventRender. You'll have to find the td that contains that event. If you inspect the fullCalendar, you'll note the tds have a data-date attribute for that particular day. That is how we will find the td that has an event in it so we can change the background color to red, specifically using:

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

In this example, the first line in eventRender uses moment to format the event start date into the format needed to match the data-date attribute value. The second line finds a td with the data-date attribute having a value of dataToFind and then adds a class we make up called activeDay, assuming you add something like this to your head/stylesheet:

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

这篇关于Fullcalendar事件单元格背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！