How do I change an event's background color with different colors, in fullcalendar?
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>