在FullCalend中更改事件的背景色

Question

我使用的是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

我想把上面日期的事件背景颜色改成红色，其余的改成绿色。

你知道我怎样给每个事件涂上不同的颜色吗？

提前谢谢

Answer 1

日历在每次事件绘制后触发事件'eventAfterRender'。这同样提供了对事件和元素的访问。您可以通过将事件.start或事件.end日期与当前日期进行比较来实现您的需求，并根据需要更改元素的颜色。

Answer 2

您可以为特定事件设置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-todayCSS属性：

.fc-future,
.fc-today {
    background-color: #10CC55;
}

Answer 3

如果要更改可以使用的事件的背景色

 eventRender: function (event, element, view) 
      {
              var date = new Date(); //this is your todays date

                if (event.start >= date)
                  $(element).css("backgroundColor", "red");

     }

如果你想改变一天的背景颜色，你可以使用Fullcalender的dayRender回调

 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

                    }

                }


      }

了解更多信息：dayRender:FullCalender