Fullcalendar не отображает (с помощью eventRender)

Question

Я хочу, чтобы цветные события соответствовали базе данных. Я использую eventRender. Вот полный код:

$(document).ready(function() { 
     var date = new Date(); 
     var calendar = $('#calendar').fullCalendar({ 

     header: 
     { 
      left: 'prev,next ', 
      center: 'title', 
      right: 'today' 
     }, 

     selectable: true, 
     selectHelper: true, 
     fixedWeekCount: false, 
     allDayDefault: true, 
     editable: true, 

     events: "http://localhost/calendar_directory/calendar_db_connect.php", 

     eventRender: function (event, element, view) 
     { 
      if (event.confirmed == 0) 
      { 
       event.color = "#FFB999"; 
      } 
      else 
      { 
       event.color = "#528881"; 
      } 
     }, 
     select: function(start, end) { 
      var title; 
      var beforeToday = false; 
      var check = $.fullCalendar.formatDate(start, "YYYY-MM-DD"); 
      var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD"); 
      if(check < today) 
      { 
      beforeToday = true;  
      } 
      else 
      { 
      title = prompt('Event Title:'); 
      } 

     if (title && !beforeToday) 
     { 
      var start = $.fullCalendar.formatDate(start, "YYYY-MM-DD"); 
      var end = $.fullCalendar.formatDate(end, "YYYY-MM-DD"); 
      $.ajax(
      { 
       url: 'http://localhost/calendar_directory/add_events.php', 
       data: 'title='+ title+'&start='+ start +'&end='+ end , 
       type: "POST", 
       success: function(json) 
       { 
       } 
      }); 

      calendar.fullCalendar('renderEvent', 
      { 
       title: title, 
       start: start, 
       end: end, 
      }, 
      true // make the event "stick" 
      ); 
     } 
     calendar.fullCalendar('unselect'); 
     }, 

     eventClick: function(event, jsEvent, view) 
     { 
      //set the values and open the modal 
      $("#eventInfo").html(event.description); 
      $("#eventLink").attr('href', event.url); 
      $("#eventContent").dialog({ modal: true, title: event.title }); 
     }, 

     eventDrop: function(event, delta) 
     { 
      var check = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD"); 
      var today = $.fullCalendar.formatDate(moment(), "YYYY-MM-DD"); 
      if(check < today) { 
       alert('Select an other start time, after today!'); 
      } 
      else 
      { 
      var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD"); 
      var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD"); 
      $.ajax(
      { 
       url: 'http://localhost/calendar_directory/update_events.php', 
       data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id , 
       type: "POST", 
      }); 
      } 
     }, 
     eventResize: function(event) 
     { 
      var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD"); 
      var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD"); 

      $.ajax(
      { 
       url: 'http://localhost/calendar_directory/update_events.php', 
       data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id , 
       type: "POST", 
      }); 
     }, 

     eventClick: function(event) 
     { 
      var decision = confirm("Do you really want to confirm that?"); 
      if (decision) 
      { 
       $.ajax(
       { 
        url: "http://localhost/calendar_directory/confirm_events.php", 
        data: "&id=" + event.id, 
        type: "POST", 
        success: function(json) 
        { 
         console.log("confirmed"); 
         //event.backgroundColor = 'green'; 
         //$('#calendar').fullCalendar('rerenderEvents'); 
        } 
       }); 
      } 
     } 
     }); 

(Пожалуйста, игнорируйте clickEvent для модального). Проблема заключается в том, что он не меняет цвет событий в первый раз (первая загрузка страницы). Но когда я удаляю/изменяю размер события, все события получают правильный цвет.

Before drop

After drop

структура таблицы: ID - INT, PR- название - VARCHAR начать -datetime конец -datetime подтвердил - Int (может быть 0 или 1) < - Цвет должно быть изменено в соответствии с этим

Answer 1

Метод eventRender запускает после соответствующий CSS для события было создано. Поэтому изменение свойств события, относящихся к форматированию/рендерингу в данный момент процесса, не имеет никакого эффекта - они уже обработаны.

К счастью, вы также получаете параметр «элемент», переданный вам в обратном вызове - это дает вам доступ к визуализированному HTML, который затем можно манипулировать.

Установка «цвет» свойство события на самом деле влияет на цвет фона и границ, цвет оказанного элемента, так что мы можем заменить то, что вы сделали с:

eventRender: function (event, element, view) 
{ 
    if (event.confirmed == 0) 
    { 
     element.css("background-color", "#FFB999"); 
     element.css("border-color", "#FFB999"); 
    } 
    else 
    { 
     element.css("background-color", "#528881"); 
     element.css("border-color", "#528881"); 
    } 
} 

Это должно иметь желаемый эффект. Возможно, это ошибка/нежелательная функция в fullCalendar - вы все равно сможете полностью управлять свойствами события и ожидать, что они вступят в силу. С другой стороны, получение параметра «element» эффективно дает вам полный контроль над обработкой события, больше, чем просто путем установки свойств события. Если этот метод выполнялся до создания элемента, у вас не было бы доступа к элементу со всей дополнительной мощностью, которая дает вам. Таким образом, это компромисс, но стоит понять внутренности, чтобы знать, что вы можете изменить, и когда в процессе вы сможете это сделать.