Fullcalendar - 基于值更改事件颜色

Question

我正在使用最新的fullcalendar，并想知道如果有人能告诉我如何根据其值改变事件的背景颜色？例如，如果value是Yes，那么bg是绿色，如果value是No，那么bg是红色的（我的Description字段是包含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"); 
    } 
    }); 

} 

    }); 

}); 

谢谢。

Answer 1

以下是一个示例，您可以使用eventRender http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/。如果描述等于“是”，则将元素背景颜色设置为黑色。

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