在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中單擊更改事件的背景顏色

回答

相關問題