在全日历中单击时更改事件的背景颜色

我想在单击时更改事件的背景颜色。下面的代码正在执行此操作，但是当我单击另一个事件时，我无法弄清楚如何返回到事件的默认背景颜色。

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

我尝试了不同的方法，但没有任何解决办法。

您可以将临时颜色事件保存在变量中，然后将其返回到之前的颜色：

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您可以在哪里复制它。