我正在使用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
我想以红色更改上述日期的事件背景颜色,其余部分为绿色。
任何想法我如何以不同的方式为每个事件着色?
提前致谢
答案 0 :(得分:4)
您可以为特定事件设置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;
}
答案 1 :(得分:2)
如果您想更改可以使用的事件的背景颜色
eventRender: function (event, element, view)
{
var date = new Date(); //this is your todays date
if (event.start >= date)
$(element).css("backgroundColor", "red");
}
如果您想更改当天的背景颜色,那么您可以使用dayRender CallBack of Fullcalender
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
}
}
}
答案 2 :(得分:1)
日历会在每次事件抽奖后触发事件'eventAfterRender'。同样可以访问事件和元素。您可以通过将 event.start 或 event.end 日期与当前日期进行比较来实现您的要求,并将元素的颜色更改为必需的。
答案 3 :(得分:1)
用于改变我以这种方式做的背景颜色
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: App.getLayoutColorCode('green')
}
希望这会有所帮助......