Javascript Fullcalendar-根据值更改事件颜色

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

我正在使用最新的fullcalendar,想知道是否有人可以告诉我如何根据事件的值更改事件的背景颜色?例如,如果值为“是”,则bg为绿色,如果值为“否”,则bg为红色(我的描述字段是包含“是”或“否”值的实际字段)。以下是我的代码:

 $(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');
                }
            }, ...