使用完整日历更改列表视图中行的背景颜色

Question

我正在尝试使用FullCalendar将listMonth视图中每个事件行的颜色更改为特定颜色，具体取决于在"event.status"中输入的内容。

这是我的全日历代码：

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listMonth, month,agendaWeek,agendaDay'
},
defaultView: 'listMonth',
locale: 'fr',
contentHeight: 600,
navLinks: true, // can click day/week names to navigate views
selectable: false,
eventRender: function(event, element, view) { 
element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
element.find('.fc-title').append("<br/>" + event.lieu); 
element.find('.fc-list-item-title').append("<br/>" + event.lieu); 
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>"); 
if (event.status == "Annulé") {
element.css('background-color', '#000');
}
},
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Example',
start: '2018-05-05',
end: '2018-05-06',
color: '#ff0000',
lieu: 'Montreal',
numero: '300445',
status: 'Complet',
conferencier: 'John Doe',
photoconferencier: 'http://www.example.com/img/profile.jpg',
lienconferencier: 'http://www.example.com/profile/link.html',
url: 'http://www.google.com'
},
{
title: 'Example2',
start: '2018-05-08',
end: '2018-05-010',
color: '#ff0000',
lieu: 'New York',
numero: '300446',
status: 'Annulé',
conferencier: 'Steve Jobs',
photoconferencier: 'http://www.example.com/img/profile2.jpg',
lienconferencier: 'http://www.example.com/profile/link2.html',
url: 'http://www.apple.com'
},
],
});

如您所见，设置条件的部分是：

if (event.status == "Annulé") {
element.css('background-color', '#000');
}

但它不起作用。什么也没发生。

我也试过：

if (event.status == 'Annulé') {
$(".fc-list-item").addClass('test');  
} else {
$(".fc-list-item").removeClass('test');
}

但也不起作用。

知道我必须在代码中更改什么才能使其正常工作吗？ 多谢！

---

编辑：

这里事件中的数据是假数据。真实数据由CMS生成。因此，也许它是在将数据添加到日历之前测试条件。我试过这个：

window.onload = function () {
if (event.status == "Annulé") {
element.css('background-color', '#000');
}
}

但它不起作用。知道我需要做什么吗？ 谢谢！

---

编辑 2 ：

原来这个帖子代码中缺少一行代码，即在我的文件代码中。这是缺失的行：

return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && ['', event.numero].indexOf($('#numero').val()) >= 0;

因此，eventRender代码如下所示：

eventRender: function(event, element) { 
element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
element.find('.fc-title').append("<br/>" + event.lieu); 
element.find('.fc-list-item-title').append("<br/>" + event.lieu); 
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>"); 
return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && ['', event.numero].indexOf($('#numero').val()) >= 0;

if (event.status == "Annulé") {
console.log('Sa fonctionne');
element.css('background-color', '#000');
}
},

如果我删除"返回 ['all'..."部分代码，它工作正常。知道冲突在哪里吗？

Answer 1

在我的主帖子中，在代码的eventRender部分缺少一行代码。

那行：

return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && ['', event.numero].indexOf($('#numero').val()) >= 0;

在条件检查之前被调用"event.status"，这导致了问题。在返回过滤器之前，我更改了行的顺序以检查条件，现在它正在工作。代码来自：

return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && ['', event.numero].indexOf($('#numero').val()) >= 0;

if (event.status == "Annulé") {
console.log('Sa fonctionne');
element.css('background-color', '#000');
}

自

if (event.status == "Annulé") {
console.log('Sa fonctionne');
element.css('background-color', '#000');
}
return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && ['', event.numero].indexOf($('#numero').val()) >= 0;

它做到了。感谢您的帮助。尤其是艾迪森。