Javascript Fullcalendar-根据值更改事件颜色
我正在使用最新的fullcalendar,想知道是否有人可以告诉我如何根据事件的值更改事件的背景颜色?例如,如果值为“是”,则bg为绿色,如果值为“否”,则bg为红色(我的描述字段是包含“是”或“否”值的实际字段)。以下是我的代码:Javascript Fullcalendar-根据值更改事件颜色,javascript,fullcalendar,Javascript,Fullcalendar,我正在使用最新的fullcalendar,想知道是否有人可以告诉我如何根据事件的值更改事件的背景颜色?例如,如果值为“是”,则bg为绿色,如果值为“否”,则bg为红色(我的描述字段是包含“是”或“否”值的实际字段)。以下是我的代码: $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullY
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
element.find('.fc-event-title').append("<br/>Successful?: <span class='myClass'><b>" + event.description + "</b></span>");
},
selectable: false,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
var url = prompt('Type Event url, if exits:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end +'&url='+ url ,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: false,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Updated Successfully");
}
});
}
});
});
$(文档).ready(函数(){
变量日期=新日期();
var d=date.getDate();
var m=date.getMonth();
var y=date.getFullYear();
var calendar=$(“#calendar”).fullCalendar({
是的,
标题:{
左:“上一个,下一个今天”,
中心:'标题',
右图:“月,agendaWeek,agendaDay”
},
事件:“events.php”,
//将全天从字符串转换为布尔值
eventRender:函数(事件、元素、视图){
如果(event.allDay=='true'){
event.allDay=true;
}否则{
event.allDay=false;
}
元素。查找('.fc事件标题')。追加(
成功?:“+event.description+”);
},
可选:false,
selectHelper:对,
选择:功能(开始、结束、全天){
var title=prompt('事件标题:');
var url=prompt('Type Event url,如果退出:');
如果(标题){
var start=$.fullCalendar.formatDate(开始,“yyyy-MM-dd HH:MM:ss”);
var end=$.fullCalendar.formatDate(end,“yyyy-MM-dd HH:MM:ss”);
$.ajax({
url:'add_events.php',
数据:'title='+title+'&start='+start+'&end='+end+'&url='+url,
类型:“POST”,
成功:函数(json){
警报(“添加成功”);
}
});
日历。完整日历('renderEvent',
{
标题:标题,,
开始:开始,
完:完,,
全天
},
true//使事件“持续”
);
}
日历。完整日历(“取消选择”);
},
可编辑:false,
eventDrop:函数(事件,增量){
var start=$.fullCalendar.formatDate(event.start,“yyyy-MM-dd HH:MM:ss”);
var end=$.fullCalendar.formatDate(event.end,“yyyy-MM-dd HH:MM:ss”);
$.ajax({
url:'update_events.php',
数据:'title='+event.title+'&start='+start+'&end='+end+'&id='+event.id,
类型:“POST”,
成功:函数(json){
警报(“更新成功”);
}
});
},
eventResize:函数(事件){
var start=$.fullCalendar.formatDate(event.start,“yyyy-MM-dd HH:MM:ss”);
var end=$.fullCalendar.formatDate(event.end,“yyyy-MM-dd HH:MM:ss”);
$.ajax({
url:'update_events.php',
数据:'title='+event.title+'&start='+start+'&end='+end+'&id='+event.id,
类型:“POST”,
成功:函数(json){
警报(“更新成功”);
}
});
}
});
});
谢谢。下面是一个示例,您可以使用eventRender。如果描述等于“是”,则将元素背景色设置为黑色
虽然每个事件对象都可以根据以下条件添加颜色参数:title:this['EventName'],start:this['date'],end:this['date'],id:this['date'],color:'green'@marcrazynes您会如何检查空描述(例如)?我尝试了
if(event.description==“”){}代码>但这会导致我收到“未定义”的消息,你能给我发一把小提琴@Flouks吗?您的event.description也可以为null?
$('#calendar').fullCalendar({
...
eventRender: function(event, element) {
if(event.description == "yes") {
element.css('background-color', '#000');
}
}, ...