在fullcalendar上单击更改事件的背景颜色 [英] Change background color of event on click in 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} 
}）; 
}，
 
标题：{
 left：prev，next today，
 center：title，
右：month，agendaweek，agendaDay
} 
}）; 
}）; 
  

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

<$ p

$ p> var prevClickedEvent;
var myDefaultBackgroundColor ='white';
eventClick：function（cal_event）{
//上次点击为默认颜色
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 href =https://plnkr.co/edit/EWzNQ3 =nofollow>一个plnkr ，您可以在其中重现它。

I want to change the background color of an event on click. The below code is doing that, but I could not figure out how to get back to the default background color of the event when I click on another event.

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

I tried different ways, but nothing fixed it up.

解决方案

You could save your temporary coloured event in an variable, and then returning it to your previous color:

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 }
      });
    },

Anyway, I would use className property to add/remove a class of the event, so managing it by css you don't need to rerender the object.

I've created a plnkr where you can reproduce it.

这篇关于在fullcalendar上单击更改事件的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！