FullCalendar 事件不保持颜色变化答案

【问题标题】：FullCalendar events do not hold color changeFullCalendar 事件不保持颜色变化
【发布时间】：2014-04-04 14:11:43
【问题描述】：

我正在通过执行以下操作更改 FullCalendar (http://arshaw.com/fullcalendar/docs/event_data/) 中的事件：

            eventClick: function (event)
            {
                if ($(this).css('background-color').match(/^(?:green|#fff(?:fff)?|rgba?\(\s*0\s*,\s*255\s*,\s*0\s*(?:,\s*1\s*)?\))$/i)) {
                    $(this).css('border-color', 'red');
                    $(this).css('backgroundColor', 'red');
                }
                else if ($(this).css('background-color').match(/^(?:red|#fff(?:fff)?|rgba?\(\s*255\s*,\s*0\s*,\s*0\s*(?:,\s*1\s*)?\))$/i)) {
                    $(this).css('border-color', 'blue');
                    $(this).css('backgroundColor', 'blue');
                }
            }

但我发现，一旦我更改了一个事件颜色（甚至是几个事件颜色），然后将一个事件拖到另一天，所有事件的颜色都会变回原来的颜色。

我怎样才能防止这种情况？？？我怎样才能让 evet 一旦改变颜色就保持不变？

【问题讨论】：

听起来您正在重新加载页面。试试event.preventDefault()
我把这个放在饼干怪兽的什么地方？？我什么时候调用它？
我在上面的函数顶部添加了它，我无法改变颜色。然后我在底部添加了它，它没有任何区别。

标签： javascript jquery css fullcalendar

【解决方案1】：

使用这个：

eventClick: function (event)
            {
                if ($(this).css('background-color').match(/^(?:green|#fff(?:fff)?|rgba?\(\s*0\s*,\s*255\s*,\s*0\s*(?:,\s*1\s*)?\))$/i)) {
                    event.color = 'red';
                    event.borderColor = 'red';
                }
                else if ($(this).css('background-color').match(/^(?:red|#fff(?:fff)?|rgba?\(\s*255\s*,\s*0\s*,\s*0\s*(?:,\s*1\s*)?\))$/i)) {
                    event.color = 'blue';
                    event.borderColor = 'blue';
                }
                calendar.fullCalendar('renderEvent',event ,true);
            }

【讨论】：

【解决方案2】：

在单个事件中而不是全局中选择颜色；然后在您的点击事件中更新事件元素和 fullCalendar 视图。

示例代码：

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    eventSources: [{
        events: [{
            title: 'Event1',
            color: 'green',
            start: '2014-04-05'
        }, {
            title: 'Event2',
                    color: 'green',
            start: '2014-04-19'
        }],

        textColor: 'black'
    }],
    eventClick: function (calEvent, jsEvent, view) {
        calEvent.color = 'red';
        $('#mycalendar').fullCalendar('updateEvent', calEvent);
    }
});

演示：http://jsfiddle.net/IrvinDominin/6Ffsy/

【讨论】：