Jquery全日历和动态事件颜色 [英] Jquery Full calendar and dynamic event colors

问题描述

我想通过jQuery事件源为jquery fullcalendar传递事件的颜色，我该如何实现这一目标？ 解决方案

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

事件（注意<$ c
$ b

  [
 {
 title = codelass>  event1的参数） ：'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 
} 
] 
  

使 event1 看起来不同的CSS

  .custom，
 .custom div，
 .custom span {
 background-color：green; / *背景色* / 
边框颜色：绿色; / *边框颜色* / 
颜色：黄色; / *文字颜色* / 
} 
  

请点击此处 http://jsbin.com/ijasa3/96 以获得快速示例。请注意event1的背景为绿色，黄色为文本的颜色。

---

另一种使用jQuery Fullcalendar <一个href =http://arshaw.com/fullcalendar/docs/event_rendering/Colors/ =noreferrer>活动颜色可以沿着这些路线：

对于需要另一种颜色的事件使用不同的Eventsources：

  $（'＃calendar'）。fullCalendar（{ 
 ... 
 eventSources：[
 //一个完整的EventSource  - 带自定义着色的对象
 {
 events：[
 {
 title：'event1'，
 start：'2012-06-10'
} 
]，
 backgroundColor：'green'，
 borderColor：'green'， 
 textColor：'yellow'
}，
 //使用默认颜色的正常事件数组
 [
 {
 title：'event2' ，
开始：'2012-06-05'，
 end：'2012-06-07'
}，
 {
 title：'event3'，
 start：'2012-06-09 12:30:00'，
 allDay：false 
} 
] 
]，
 ... 
}）; 
  

http://jsbin.com/ijasa3/99

I would like to to pass the colors for the events through my json events source for jquery fullcalendar, how do i achieve this ?

解决方案

Nothing easier than that. If you check the documentation of jQuery Fullcalendar Event Colors you see that there is a parameter className you can specify for each event object. The content of that parameter gets added as class to the events and thus you only need to specify the css with matching name.

The events (take note of the className parameter on event1)

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

The CSS to make event1 look different

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

Check here http://jsbin.com/ijasa3/96 for a quick sample. Note how event1 has green as background and yellow as text color.

---

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

这篇关于Jquery全日历和动态事件颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！