eventClick change background-color

Question

I am trying to change the "event" background-color when I click the event in FullCalendar

I am trying the following -

$(document).ready(function() {

    $('#calendar').fullCalendar({

        editable: true,

        events: "json-events.php",

        eventDrop: function(event, delta) {
            alert(event.id);
        },

        loading: function(bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        },

        eventClick: function(event){
            $(event.target).css('background-color','yellow');
        }

    });

});

This however does nothing. Can this be done and can someone point me in the right direction?

Thanks

Answer 1

eventClick: function(event) {
    event.backgroundColor = 'yellow';
    $('#mycalendar').fullCalendar( 'rerenderEvents' );
},

Answer 2

eventClick passes an FC event object, not a jQuery event. You can change the calendar event's properties, and then just updateEvent.

Answer 3

Your function callback doesn't have the scope to use $(this) - that's why it's passed the jQuery Event object.

You should use event.target - this is the DOM element which initiated the event.

Answer 4

   eventClick: function(event){
        $(this).css('background-color','yellow');
    }