Jquery全日历和动态事件颜色

前端之家收集整理的这篇文章主要介绍了Jquery全日历和动态事件颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想通过jquery fullcalendar的json事件源传递事件的颜色,我该如何实现?

解决方法

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

事件(记录event1上的className参数)

[
  {
    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
  }
]

使事件1的CSS看起来不同

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

查看这里http://jsbin.com/ijasa3/96快速样品。注意事件1如何作为背景和绿色作为文本颜色

使用jQuery Fullcalendar Event Colors中描述的选项的另一种可行的方法可以这样:

对于需要其他颜色的事件使用不同的事件资源:

$('#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',end    : '2012-06-07'
      },{
        title  : 'event3',allDay : false
      }
    ]
  ],...
});

http://jsbin.com/ijasa3/99

猜你在找的jQuery相关文章