Fullcalendar - 根据值更改事件颜色

Question

我正在使用最新的FullCalendar，想知道如何根据事件值更改背景颜色。例如，如果值为Yes，则背景为绿色，如果值为No，则背景为红色（我的描述字段实际上包含Yes或No值）。这是我目前的代码：

 $(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");
    }
   });

}

  });

 });

谢谢。

- user1060641

---

在每个事件对象中，你可以根据条件添加颜色参数，比如标题：this['EventName']，开始时间：this['date']，结束时间：this['date']，ID：this['date']，颜色：'green'。 - Mahesh Reddy

Answer 1

这里有一个例子，你可以使用 eventRender http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/。如果描述等于"yes"，则将元素的背景颜色设置为黑色。

$('#calendar').fullCalendar({
            ...
            eventRender: function(event, element) {
                if(event.description == "yes") {
                    element.css('background-color', '#000');
                }
            }, ...

- MarCrazyness

---

@MarCrazyness你会怎么检查空描述（例如）？我已经尝试使用if(event.description == ""){};，但这导致我收到“未定义”的反馈。 - mafraqs

你能给我发送一个 Fiddle 吗，@Flouks？你的 event.description 也可能为空吗？ - MarCrazyness