Fullcalendar -> Change color selected event

Question

I'm using FullCalendar and I can't change the background of the events of a selected date. The other days when you click are marked with red, but events no. I think it is by the CSS but I do not know how to modify it to work well.

My code: http://jsfiddle.net/y33wb52n/

Javascript

$(document).ready(function() {
    var fecha_seleccionada;
    var tempVar = "";

    $('#calendar').fullCalendar({
        lang: "es",

        selectable: true,
        select: function(a, b) {
            fecha_seleccionada = a.format();
            //alert(fecha_seleccionada);
            var input_fecha = document.getElementById("input_fecha");
            input_fecha.value = fecha_seleccionada;
        },

        //defaultDate: '2015-02-12',
        editable: false,
        eventLimit: false, // allow "more" link when too many events
        events: [
                {
                    title: 'Evento',
                    width: '0',
                    start: '2015-09-17'
                },
                {
                    title: 'Evento',
                    width: '0',
                    start: '2015-09-19'
                }
        ],


        dayClick: function(date, allDay, jsEvent, view) {
            // change the day's background color just for fun
            if (tempVar == "")
            {
                $(this).css('background-color', 'red');
                tempVar = this;
            }
            else
            {
                $(this).css('background-color', 'red');
                $(tempVar).css('background-color', '#f6f6f6');
                tempVar = this;
            }
        }


    });
});

CSS

.fc-event-skin {
margin: -20px auto 0px auto; /* spacing between events and edges */
padding: 30px 0px;
border-radius: 0px !important;

}

HTML

<div id='calendar' style='margin:3em 0;font-size:13px'></div>

Any help? Thanks!

Answer 1

I believe that's because if you click an event you're not clicking on the day. I had a play with the example you provided, and it's true if you click on an event it doesn't change colour, but you can actually click on the day behind the event which does change its colour.

http://i.stack.imgur.com/OKDiR.png

So, when you're clicking an event, the dayClick event isn't firing, the eventClick event is firing.

http://fullcalendar.io/docs/mouse/eventClick/

Not sure how you're supposed to get the day that's behind the event from inside that callback though.

Answer 2

Simply add this to your css:

.fc-highlight {
    background-color:red;
}

This works when day is clicked, so you should have this in your fullcalendar jQuery:

$(document).ready(function() {
           $('#calendarID').fullCalendar({

           dayClick: function(date, jsEvent, view) {
                // some code
                $('#calendarID').fullCalendar('select', date);

           },
...