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

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对其进行管理无需重新渲染对象。

我创建了一个plnkr ，您可以在其中复制它。