使用eventRender时,Fullcalendar不呈现颜色

Question

当我设置fullCalendar并设置eventRender函数回调时,我想根据LeadId是否为null来设置事件的颜色.但即使文档中这样说,这似乎也不起作用:http://arshaw.com/fullcalendar/docs/event_data/Event_Object/#color-options

有没有办法根据数据设置事件颜色？

 calendar = $('#dayview').fullCalendar({
            ....
            timeFormat: 'HH:mm',
            columnFormat: {
                agendaDay: 'dddd dd/MM/yyyy'
            },
            eventClick: function (calEvent, jsEvent, view) {
                var leadUrl = "/Leads/" + calEvent.LeadId;
                window.location = leadUrl;
            },
            eventRender: function (event, element) {
                if (event.LeadId != null) {
                    event.eventColor =  "#B22222";
                    event.eventBackColor = "#B22222";                       
                }
            },

更新:

这真的很奇怪.该事件 已为服务器上的事件返回了所有属性. element只是事件的DOM元素.当我将事件拖动/移动到日历中的其他位置时,事件变为红色,如果我检查事件对象,它现在将颜色设置为红色.所以问题是为什么不应用于第一次渲染,而是在后续渲染(即移动后)后应用颜色？

Answer 1

编辑2：对fc-event-skin类的一些新更改...它现在只是fc-event，所以样式不应该成为问题。请在此处查看作者的注释 fullcalendar fc-event class ...

编辑1：可能不是确切的错误。

最好的方法是在事件对象中设置className并将其添加到“ fc-event-skin”类找到的元素中。但是，您添加的类将稍后在CSS中出现，并且颜色不会优先，因此您必须使用！important。这也保留了“假”圆角...

将此方法挂在日历上...

eventRender:
function (event, element, view) {
    element.find('.fc-event-skin').addClass(event.className.join(' '));
}

这在您自己的样式表中...

.redGray
{
    border-color: DarkGray !important;
    background-color: LightGray !important;
    color: red !important;
}

原始答案：

我认为这是渲染代码中的一个小错误。element参数是一个jQuery对象，因此您可以根据您的自定义事件数据对其进行修改。如果设置元素的样式和文本，则它将使用您设置的颜色进行渲染；但是，在我看来，该元素还删除了其他样式，例如圆角以及时间和文本的格式。

eventRender: 
function (event, element) {
    if (event.LeadId != null) {
        element.css('color', 'blue');
        element.css('background-color', 'yellow');
        element.text(element.text);
    }