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

现在取决于你。很抱歉，因为我现在正忙着做一个繁忙的日程。如果有人能为此为Lane先生制作一个合适的解决方案（即使编辑这个答案），我感到很高兴。

谢谢。

在每个事件的基础上使事件背景颜色独特

3 个答案: