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";                       
                }
            },

更新

这真的很奇怪。事件已为服务器上的事件返回了所有属性。元素只是该事件的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);
    }

Answer 2

我相信这是一个错误，至少是各种各样的错误。问题是renderEvents fullcalendar.js EventRender {/ 1}}函数setSkinCSS之后的RenderEvent回调被称为。因此，对元素颜色的任何更改都不会在下次渲染时反映出来。

我怀疑修复很容易，但我确实认为这可以作为一个错误。在我看来，{{1}}回调应该很早就完成，当然在HTML生成之前。

（我的解决方法是尝试在fullcalendar调用之前设置元素的颜色 - 即不使用FullCalendar的EventRender回调来设置颜色）

Answer 3

尝试使用color而不是eventColor event.Color =“＃B22222”;

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

使用此代码

$('#calendar').fullCalendar('renderEvent', {
    id : 99,
    title : 'Some event',
    start : y + '-' + m + '-28',
    color : 'red'
}, true);

效果很好!!

Answer 4

已接受答案的编辑＃2确实提到.fc-event-skin不再需要，但代码片段尚未更新。

你现在可以说：

plot(function(x) { my.function(1,0,x) })

在您的样式表中您所拥有的位置：

    string input = TextEditor.text;
    string[] inputWords = input.Split(' ');
    Dictionary<string, int> wordCounts = new Dictionary<string, int>();
    foreach (string word in inputWords)
    {
        if (wordCounts.ContainsKey(word))
        {
            wordCounts[word]++;
        }
        else
        {
            wordCounts.Add(word, 1);
        }
    }

中提琴！如果您的某些事件将SomeBool设置为true，则它们将具有黑色背景和白色文本。

Answer 5

这是完整的代码：

function addTestEvents() {

        var d = new Date();
        var y = d.getFullYear();
        var m = d.getMonth() + 1;
        if (m < 10)
        m = '0' + m;

        $('#calendar').fullCalendar('renderEvent', {
        id : 99,
        title : 'Some event',
        start : y + '-' + m + '-28',
        color : 'red'
        }, true);
}

使用eventRender时，Fullcalendar不呈现颜色

5 个答案: