Fullcalendar - изменить цвет события на основе значения

Question

Я использую последний полный календарь и задавался вопросом, может ли кто-нибудь показать мне, как я могу изменить цвет фона события на основе его значения? Например, если значение равно Yes, тогда bg будет зеленым, а если значение равно No, тогда 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"); 
    } 
    }); 

} 

    }); 

}); 

Спасибо.

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