How do I change an event's background color with different colors, in fullcalendar?
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 see this code, on document site, but I can't to apply 2 colors:
$('#calendar').fullCalendar({
editable: true,
events: [{
title: 'Teste1',
start: new Date(y, m, d, 10, 30),
allDay: false,
editable: false
}, {
ti开发者_运维知识库tle: 'Teste2',
start: new Date(y, m, d, 11, 40),
allDay: false
}],
eventColor: '#378006'
});
Since you are using the latest version (1.5), you can set the backgroundColor
property.
{
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 textColor
property if you need to change that as well.
Use css and the className property.
<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>
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'
})
});
eventContent: function(arg) {
var sln = arg.event.title.substring(0, 1);
switch(sln) {
case '1':
arg.backgroundColor='#198754';
break;
case '2':
arg.backgroundColor='#adb5bd';
break;
case '3':
arg.backgroundColor='#ffc107';
break;
case '4':
arg.backgroundColor='#6f42c1';
break;
default:
//
}
}
精彩评论