Jquery完整日历和动态事件颜色

I would like to to pass the colors for the events through my json events source for jquery fullcalendar, how do i achieve this ?

我想通过我的json事件源为jquery fullcalendar传递事件的颜色，我该如何实现？

4 个解决方案

#1

Nothing easier than that. If you check the documentation of jQuery Fullcalendar Event Colors you see that there is a parameter className you can specify for each event object. The content of that parameter gets added as class to the events and thus you only need to specify the css with matching name.

没有比这更容易的了。如果查看jQuery Fullcalendar事件颜色的文档，您会看到可以为每个事件对象指定一个参数className。该参数的内容作为类添加到事件中，因此您只需要指定具有匹配名称的css。

The events (take note of the className parameter on event1)

事件（记下event1上的className参数）

[
  {
    title     : 'event1',
    start     : '2012-06-10',
    className : 'custom',
  },
  {
    title  : 'event2',
    start  : '2012-06-05',
    end    : '2012-06-07'
  },
  {
    title  : 'event3',
    start  : '2012-06-09 12:30:00',
    allDay : false
  }
]

The CSS to make event1 look different

使事件1看起来不同的CSS

.custom,
.custom div,
.custom span {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
}

Check here http://jsbin.com/ijasa3/96 for a quick sample. Note how event1 has green as background and yellow as text color.

请访问http://jsbin.com/ijasa3/96获取快速样本。请注意event1如何将绿色作为背景，将黄色作为文本颜色。

Another viable way using the options described in jQuery Fullcalendar Event Colors could go along these lines:

使用jQuery Fullcalendar事件颜色中描述的选项的另一种可行方式可以遵循以下几点：

Use different Eventsources for the events which need another color:

对需要其他颜色的事件使用不同的Eventsource：

$('#calendar').fullCalendar({
...
  eventSources: [
    //a full blown EventSource-Object with custom coloring
    {
      events: [  
        {
          title     : 'event1',
          start     : '2012-06-10'
        }
      ],
      backgroundColor: 'green',
      borderColor: 'green',
      textColor: 'yellow'
    },
    //a normal events-array with the default colors used
    [
      {
        title  : 'event2',
        start  : '2012-06-05',
        end    : '2012-06-07'
      },
      {
        title  : 'event3',
        start  : '2012-06-09 12:30:00',
        allDay : false
      }
    ]
  ],
  ...
});

http://jsbin.com/ijasa3/99

#2

With version 1.5 you can set textColor, backgroudColor and borderColor in each event.

使用1.5版，您可以在每个事件中设置textColor，backgroudColor和borderColor。

#3

If you upgrade to version 1.5 you may find this does not work. The solution appears to be to comment out the style

如果升级到1.5版，您可能会发现这不起作用。解决方案似乎是评论风格

.fc-event-skin { }

#4

For a better rendering, it is better to use backgroundColor of the EventObject.

为了获得更好的渲染效果，最好使用EventObject的backgroundColor。

#1