Jquery完整日历和动态事件颜色

Question

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

Answer 1

没有比这更容易的了.如果查看jQuery Fullcalendar 事件颜色的文档,您会看到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
  }
]

使CSS event1看起来与众不同

.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如何将绿色作为背景,将黄色作为文本颜色.

使用jQuery Fullcalendar 事件颜色中描述的选项的另一种可行方法可以遵循以下几点:

对需要其他颜色的事件使用不同的Eventsource:

$('#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

Answer 2

使用1.5版,您可以在每个事件中设置textColor,backgroudColor和borderColor.

Answer 3

如果升级到1.5版,您可能会发现这不起作用.解决方案似乎是评论风格

.fc-event-skin { }