Fullcalendar 使每个事件的背景颜色都是唯一的

我相信有一个简单的解决方案，但在阅读了现有的帖子和文档之后，我还没有找到它。这是我在这里的第一篇文章，所以非常感谢您的帮助

我正在将FullCalendar与ExpressionEngine和EE的日历模块集成，并在FancyBox中呈现事件

我唯一剩下的问题是，每个事件的背景都是相同的颜色。我想要完成的是在任何给定的一天，使多个事件具有不同的背景颜色，以确定该事件是唯一的。在文档中，它解释了如何更改背景颜色，但这是一个“要么全有，要么全无”的解决方案

我还试图调整样式，但这使“每天”单元格具有背景色，而不是实际的单个事件

构建日历并从EE填充事件的代码如下所示：

$(document).ready(function() {  
  $('#calendar').fullCalendar({
    header: {
       left: 'prev,next',
       center: 'title',
       right: ''
    },
    editable: false,
    events: [ {}
      {exp:calendar:events event_id="{segment_3}" sort="asc" dynamic="off"}
        {occurrences}
          ,{title: '{event_title}',
          url: '{url_title_path="path_to/event/"}',
          start: new Date({occurrence_start_date format="%Y,%n-1,%j"}),
          end:  new Date({occurrence_end_date format="%Y,%n-1,%j"}),
          allDay: true,}
        {/occurrences}
      {/exp:calendar:events}
    ],
    eventClick: function(event) {
        if (event.url) {
        $("a").fancybox(event.url);
            return false;
        }
    }
});  });

如果事件是手动填充的，但数据来自ExpressionEngine，而不是硬编码，那么这将很简单

关于如何使每天的每一个事件都以不同于同一天列出的任何其他事件的背景色呈现，您有何想法

---

谢谢你的阅读

当前版本的fullCalendar在事件对象“.backgroundColor”上有一个属性，该属性可设置为更改该事件的背景颜色。当然，你必须编写一些代码来设置背景颜色，在一天内都是唯一的。

< P>你可以考虑在这里使用CSS3第n个子选择器。这将允许CSS自动为您更改颜色。见：

---

当然，您需要针对适当的元素，但是如果没有看到完整的DOM，我们将很难在这里提供帮助

您可以使用

eventAfterAllRender

，它在两个源的完整日历中的所有事件都完成渲染后触发

eventAfterAllRender: function( view ) {
    var allevents = $('#calendar').fullCalendar('clientEvents');
}

现在，使用

allevents

对象，您可以随心所欲

这是我为自己拍的一张：

eventAfterAllRender: function(view) {
                    var allevents = $('#calendar').fullCalendar('clientEvents');
                    var countevents = 0;
                    if( allevents.length ) {
                        countevents = countevents + allevents.length;
                    }
                    if(!countevents) {
                        // alert('event count is'+countevents);
                        console.log('event count is',countevents);
                    }
                }

我的一位朋友能够获得重复事件的id，现在我可以在循环中删除重复事件，如下所示：

$('#calendar').fullCalendar('removeEvents', allevents[i].id);

现在由你决定。非常抱歉，因为我现在的日程很忙。我很高兴有人能从中为莱恩先生提供一个合适的解决方案（即使是编辑这个答案）

---

谢谢。

谢谢您的反馈！我使用的是当前版本的fullCalendar，我知道这个属性，但我遇到的问题是在一天内设置每个事件，因为它每天都在变化。这确实有帮助，但给了我一个想法，我需要做一些工作。