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

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

1 个答案: