改变FullCalendar中事件的背景颜色

1 人关注

我正在使用FullCalendar v1.6.1版本。我想根据一些条件改变事件的背景颜色，其余的事件用另一种颜色，但我不知道如何使不同的事件。

在我的表中，表名是booking。

id --- + ---   the_date   
 1           2014-02-25 
 2           2014-02-26
 3           2014-02-27
 4           2014-03-22
 5           2014-04-15
 6           2014-04-17
我想把上述日期的事件背景颜色改为红色，其余的改为绿色。
有什么办法可以让我对每个事件进行不同的着色？


         2
         
         个评论


           
            Bharat soni
           
           ：


           
            根据你的颜色更新样式表。


           
            MarCrazyness
           
           ：


           
            可能重复的
            
             全历--根据数值改变事件的颜色

php


         jquery


         python


         json


         fullcalendar


        4
        
        个回答


          已采纳


         0
         
         人赞同


          
           你可以为你的特定事件设置
           
            backgroundColor
           
           属性。
          
          $('#calendar').fullCalendar({
      title: '1',
      start: new Date(2014, 02, 25, 10, 30),
      allDay: false,
      editable: false,
      backgroundColor: '#ED1317'
      title: '2',
      start: new Date(2014, 02, 26, 10, 30),
      allDay: false,
      editable: false,
      backgroundColor: '#ED1317'
对于其余的日期，只需使用.fc-future和.fc-today。CSS属性。
.fc-future,
.fc-today {
    background-color: #10CC55;


           
            
             
              但我需要改变从今天开始的事件的背景颜色。它显示所有日子的背景颜色为绿色。我不需要改变前几天的背景颜色。


          
           
            
             
             
              Anil Mahajan
             
            
            
             发布于
             
             2014-03-01


          
           
            
             如果你想改变事件的背景颜色，你可以使用
            
             eventRender: function (event, element, view) 
              var date = new Date(); //this is your todays date
                if (event.start >= date)
                  $(element).css("backgroundColor", "red");
如果你想改变一天的背景颜色，你可以使用Fullcalender的dayRender CallBack。
 dayRender: function (date, element, view) 
                var date = new Date(date);
                var day = date.getDate().toString();
                if (day.length == 1)
                    day = 0 + day;
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString();
                if (month.length == 1)
                    month = 0 + month;
                var dateStr = year + "-" + month + "-" + day ;
                // YourDates is Json array of your default dates
                for (var i = 0; i < YourDates.length; i++) 
                 //here you campare calender dates to your default dates
                   if ( dateStr.toString() == YourDates[i].toString() ) 
                        $(element).css("background", "red"); // it will set backgroud of that date
for More Info :DayRender:FullCalender


          
           
            
             
              
               日历引发的事件
               
                'eventAfterRender'
               
               在每个事件抽签之后。同样提供访问
               
                event
               
               和
               
                element
               
               也是如此。你可以实现你的要求，通过比较
               
                事件.开始
               
               or
               
                event.end
               
               date to current date,和change the color of the
               
                element
               
               根据需要。


          
           
            
             
              
               
               
                Smit kalwal
               
              
              
               发布于
               
               2014-03-01


          
           
            
             
              
               对于改变背景颜色，我是这样做的
              
              title: 'Long Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2),