Javascript 如何在 fullcalendar 中使用不同颜色更改事件的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5668248/
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
How do I change an event's background color with different colors, in fullcalendar?
提问by claudioprv
I'm using the last version of fullcalendar, I looked on documentation how change background color event, but I don't know how make to different events.
I need for code sample with events red, blue, green, like the following picture:
我正在使用 的最新版本fullcalendar，我查看了文档如何更改背景颜色事件，但我不知道如何生成不同的事件。
我需要带有红色、蓝色、绿色事件的代码示例，如下图所示：
I see this code, on document site, but I can't to apply 2 colors:
我在文档站点上看到此代码，但我无法应用 2 种颜色：
$('#calendar').fullCalendar({
editable: true,
events: [{
title: 'Teste1',
start: new Date(y, m, d, 10, 30),
allDay: false,
editable: false
}, {
title: 'Teste2',
start: new Date(y, m, d, 11, 40),
allDay: false
}],
eventColor: '#378006'
});
回答by Brandon
Since you are using the latest version (1.5), you can set the backgroundColorproperty.
由于您使用的是最新版本 (1.5)，您可以设置该backgroundColor属性。
{
title: 'Teste1',
start: new Date(y, m, d, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#SomeColor'
},
{
title: 'Teste2',
start: new Date(y, m, d, 11, 40),
allDay: false,
backgroundColor: '#SomeOtherColor'
}
You can also set the textColorproperty if you need to change that as well.
textColor如果您还需要更改该属性，也可以设置该属性。
回答by Matt MacLean
Use css and the className property.
使用 css 和 className 属性。
<style>
.event {
//shared event css
}
.greenEvent {
background-color:#00FF00;
}
.redEvent {
background-color:#FF0000;
}
</style>
<script>
$('#calendar').fullCalendar({
editable: true, events: [
{
title: 'Teste1',
start: new Date(y, m, d, 10, 30),
allDay: false,
editable: false,
className: ["event", "greenEvent"]
},
{
title: 'Teste2',
start: new Date(y, m, d, 11, 40),
allDay: false,
className: ["event", "redEvent"]
} ], eventColor: '#378006' });
</script>
回答by Gobind Gupta
I have applied the color code like this for each event, It works for me.
我已经为每个事件应用了这样的颜色代码，它对我有用。
$.each(data, function(i, v){
var event =[];
var col = "";
if(v.Status == 1)
{
col = "#00c0ef";
}
else if(v.Status == 2){
col = "#dd4b39";
}
else if (v.Status === 3)
{
col = "#f39c12";
}
else {
col = "#00a65a";
}
event.push({
title: v.AssignedName + "\n Installation Date: \n" + da,
start: da,
backgroundColor: col,
textColor:'black'
})
});
