我如何在fullcalendar中更改不同颜色的事件背景颜色？

Question

我正在使用fullcalendar的最后一个版本,我查看了文档如何更改背景颜色事件,但我不知道如何制作不同的事件.
我需要代码示例与事件红色,蓝色,绿色,如图片.

我在文档网站上看到了这段代码,但我无法应用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'
});

Answer 1

由于您使用的是最新版本(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'
}   

textColor如果您还需要更改属性,也可以设置属性.

Answer 2

使用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>