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 表題 - INT <（0又は1であることができる） - - 色VARCHARが確認-datetime 端-datetime を開始 これに応じて変更する必要があります

Answer 1

対応するCSSの後にeventRenderメソッドが実行されますイベントが作成されたためです。したがって、プロセスのこの時点でフォーマット/レンダリングに関連するイベントのプロパティを変更しても効果はありません。すでに処理されています。

幸いなことに、コールバックで渡される「要素」パラメータも取得されます。これにより、レンダリングされた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のバグ/望ましくない機能です。イベントのプロパティを完全に操作して有効にしたいと思うでしょう。一方、「要素」パラメータを効果的に取得すると、イベントのプロパティを設定するだけでなく、イベントのレンダリングを完全に制御することができます。要素が作成される前にこのメソッドが実行された場合、要素にアクセスすることはできません。したがって、トレードオフですが、あなたが何を変えることができるかを知るために内部を理解する価値があります。