Question

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

这是我的FullCalendar代码：

      $('#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');
            }
  },

如果我将其删除＆＃34;请返回[＆＃39; all＆＃39; ...＆＃34;部分代码，它工作正常。知道冲突在哪里吗？

Answer 1

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

那一行：

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

在使用＆＃34; event.status＆＃34;进行条件检查之前调用了

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

  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;

它成功了。谢谢你的帮助。特别是ADyson。

使用FullCalendar更改列表视图中行的背景颜色

1 个答案: