更改“全日历”中事件的背景颜色

Question

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

在我的表中，表名是预订：

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

您可以为特定事件设置 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;
}

Answer 2

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

 eventRender: function (event, element, view) 
      {
              var date = new Date(); //this is your todays date
                if (event.start >= date)
                  $(element).css("backgroundColor", "red");
     }

如果您想更改一天的背景颜色，则可以使用day渲染全日历的回调

 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
                    }
                }

      }

有关更多信息:d ayRender：FullCalender

Answer 3

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

Answer 4

为了改变背景颜色，我以这种方式做了

{
    title: 'Long Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2),
    backgroundColor: App.getLayoutColorCode('green')
}

希望这有帮助....