23

我想通过我的 json 事件源为 jquery fullcalendar 传递事件的颜色，我该如何实现？

4

4 回答 4

43

没有比这更容易的了。如果您查看 jQuery Fullcalendar Event Colors的文档，您会看到className可以为每个事件对象指定一个参数。该参数的内容作为类添加到事件中，因此您只需要指定具有匹配名称的 css。

事件（注意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
  }
]

让 CSSevent1看起来不一样

.custom,
.custom div,
.custom span {
    background-color: green; /* background color */
    border-color: green;     /* border color */
    color: yellow;           /* text color */
}

在此处查看http://jsbin.com/ijasa3/96以获取快速示例。请注意 event1 如何以绿色作为背景，以黄色作为文本颜色。

Another viable way using the options described in jQuery Fullcalendar Event Colors could go along these lines:

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
      }
    ]
  ],
  ...
});

http://jsbin.com/ijasa3/99

于 2010-03-14T10:43:51.983 回答
7

With version 1.5 you can set textColor, backgroudColor and borderColor in each event.

于 2011-09-28T12:04:20.717 回答
6

If you upgrade to version 1.5 you may find this does not work. The solution appears to be to comment out the style

.fc-event-skin { }
于 2011-08-01T10:26:55.700 回答
2

For a better rendering, it is better to use backgroundColor of the EventObject.

于 2014-03-21T17:50:28.490 回答