Изменить цвет фона события при щелчке в fullcalendar

Question

Я хочу изменить цвет фона события при щелчке. Этот код делает это, но я не мог понять, как вернуться к цвету фона по умолчанию, когда я нажимаю на другое событие.

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

Я пробовал разные способы, но ничего не исправил.

Answer 1

Вы можете сохранить временную окрашенного событие в переменной, а затем вернуть его в свой предыдущий цвет:

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

Во всяком случае, я хотел бы использовать className свойство, чтобы добавить/удалить класс мероприятия, так что управление это с помощью css, вам не нужно переопределять объект.

Я создал a plnkr, где вы можете воспроизвести его.