Jquery 全日历和动态事件颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2441695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Full calendar and dynamic event colors
提问by Aneef
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 传递事件的颜色，我该如何实现？
回答by jitter
Nothing easier than that. If you check the documentation of jQuery Fullcalendar Event Colorsyou see that there is a parameter classNameyou 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 Event Colors的文档，您会看到className您可以为每个事件对象指定一个参数。该参数的内容作为类添加到事件中，因此您只需要指定具有匹配名称的 css。
The events (take note of the classNameparameter on event1)
事件（注意classNameevent1上的参数）
[
{
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 event1look different
使event1看起来不同的 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/96for 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 Colorscould go along these lines:
使用 jQuery Fullcalendar Event Colors 中描述的选项的另一种可行方法可以遵循以下几点：
Use different Eventsources for the events which need another color:
对需要另一种颜色的事件使用不同的事件源：
$('#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
}
]
],
...
});
回答by Joaquim Franco
With version 1.5 you can set textColor, backgroudColor and borderColor in each event.
使用 1.5 版，您可以在每个事件中设置 textColor、backgroudColor 和 borderColor。
回答by Leo
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 { }
回答by giuseppe
For a better rendering, it is better to use backgroundColorof the EventObject.
为了更好的呈现，它是更好地使用backgroundColor的EventObject。
