使事件背景颜色在每个事件的基础上唯一

Question

我确信有一个简单的解决方案，但在阅读了现有的帖子和文档后，我还无法找到它。这是我在这里的第一个帖子，所以任何帮助都非常感谢。

我正在将FullCalendar与ExpressionEngine和EE的Calendar模块集成，并且我在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，而不是硬编码的，那么这将很简单。

关于如何使每天的每个事件都呈现出与当天列出的任何其他事件不同的背景色，有什么想法吗？

感谢阅读！！！

Answer 1

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

Answer 2

您可以考虑在此处使用css3第n个子选择器。这将允许CSS自动为您更改颜色。请参阅：http://css-tricks.com/how-nth-child-works/

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

Answer 3

您可以使用eventAfterAllRender，它是在两个源的fullCalendar中的所有事件都完成渲染后触发的。

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

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

谢谢。