FullCalendar events do not hold color change

1
votes

I am changing the events in FullCalendar (http://arshaw.com/fullcalendar/docs/event_data/) by doing the following:

            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');
                }
            }

But what I find is that once I change an event color (Or even several event colors) and then drag an event to another day, all the events change color back to their original colours.

How can I prevent this??? How can I make the evet persist their color once changed?

2
javascriptjquerycssfullcalendar
Sounds like you're reloading the page. Try event.preventDefault() – cookie monster
Where do I put this at cookie monster?? When do I call it? – Harry Boy
I added it at the top of the above function and I couldnt change the color. Then I added it at the bottom and it made no difference. – Harry Boy

2 Answers

0
votes

use this:

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);
            }
0
votes

Se the color in the single event and not globally; then in your click event update the event element and the fullCalendar view.

Sample code:

$('#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);
    }
});

Demo: http://jsfiddle.net/IrvinDominin/6Ffsy/