在fullcalendar中单击更改事件的背景颜色

我想单击更改事件的背景颜色。下面的代码是这样做的，但我不知道如何返回到事件的默认背景颜色，当我点击另一个事件。在fullcalendar中单击更改事件的背景颜色

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

我尝试过不同的方式，但没有解决它。

来源

2016-03-04 nagen

您可以节省您的临时彩色事件的变量，然后将其返回到以前的颜色：

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，您可以在其中重现它。

来源

2016-03-04 14:39:55

嗨马里奥感谢您的帮助，但我得到一个错误如下，无法修复 SyntaxError：缺少：后属性ID var prevClickedEvent; – nagen

嗨，@nagen。我刚刚创建了一个plnkr并用链接更新了我的答案。仔细看看它，并在定位变量定义的地方保持特别的注意。 –

是@mario，问题出在变量的位置，现在工作，非常感谢 – nagen

在fullcalendar中单击更改事件的背景颜色

回答

相关问题