Change background color of event on click in fullc

Question

I want to change the background color of an event on click. The below code is doing that, but I could not figure out how to get back to the default background color of the event when I click on another event.

$(document).ready(function() {

    $("#adsm_calendar").fullCalendar({
        height: 575,
        events :"/get_calander_events",

        eventClick:function(cal_event){

          cal_event.backgroundColor = 'blue';

          $('#adsm_calendar').fullCalendar( 'rerenderEvents' );
          $.ajax("<%= the_path %>", {
              type: "POST",
              data: { id: cal_event.id }
          });
        },

        header:{
            left: "prev,next today",
            center: "title",
            right: "month,agendaWeek,agendaDay"
        }
    });
  });

I tried different ways, but nothing fixed it up.

Answer 1

You could save your temporary coloured event in an variable, and then returning it to your previous color:

var prevClickedEvent;
var myDefaultBackgroundColor = 'white';
eventClick:function(cal_event){
      //Previous clicked to default color
      if(prevClickedEvent){
           prevClickedEvent.backgroundColor = myDefaultBackGroundColor;
      }   

      cal_event.backgroundColor = 'blue';
      prevClickedEvent = cal_event;


      $('#adsm_calendar').fullCalendar( 'rerenderEvents' );
      $.ajax("<%= the_path %>", {
          type: "POST",

          data: { id: cal_event.id }
      });
    },

Anyway, I would use className property to add/remove a class of the event, so managing it by css you don't need to rerender the object.

I've created a plnkr where you can reproduce it.