fullcalendarのEventRender

Question

私はfullcalendarで作業を開始しています。次の問題があります。 fullcalendarを持つ "eventSources"という関数を使用して、複数のデータをJSON形式に変換するために、codeigniterを使用してPHPからJSONにデータを取り込みます。今私の問題は、プロパティ "eventRender"を適用する必要があるが、私が取得するデータのうちの1つにしか適用できないということです。この場合、Calendar/get_alertに適用したいだけですが、それを変える方法は？私はコードを残す。

<script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t \t $('#fullcalendar').fullCalendar({ 
 
\t \t  header: { 
 
\t    left: 'title', 
 
\t \t  center: 'agendaDay,agendaWeek,month', 
 
\t \t  right: 'prev,next today' 
 
\t \t  }, 
 
\t \t \t editable: true, 
 
\t \t \t firstDay: 1, 
 
\t \t \t selectable: true, 
 
\t \t \t defaultView: 'month', 
 
\t \t \t 
 
\t \t \t eventSources: [ 
 
          '<?= base_url() ?>calendar/get_alert', 
 
          '<?= base_url() ?>calendar/get_Sales', 
 
          '<?= base_url() ?>calendar/get_purchases' 
 
          ], 
 
     
 
    
 
          eventRender: function(event, element, view){ 
 
          var el = element.html(); 
 
          element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>"); 
 
       
 
          element.find('.close').click(function(){ 
 
          if(!confirm("Delete event?")){ 
 
           return false; 
 
          }else{ 
 
          var id = event.id; 
 
          $.post('<?= base_url() ?>calendar/delete_alert', 
 
          { 
 
           id:id 
 
          }, 
 
          function(data){ 
 
           if(data == 1) 
 
           alert('Successfully deleted'); 
 
           else 
 
           alert('Error deleted'); 
 
          }); 
 
           $("#fullcalendar").fullCalendar('removeEvents', event.id); 
 
        }   
 
       });    
 
      } 
 
\t \t  }); \t \t 
 
\t  }); 
 
    </script>

新しいコード、それを行うには、フォーマットJSONで各URLヴィアンのデータ

<script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t \t $('#fullcalendar').fullCalendar({ 
 
\t \t  header: { 
 
\t    left: 'title', 
 
\t \t  center: 'agendaDay,agendaWeek,month', 
 
\t \t  right: 'prev,next today' 
 
\t \t  }, 
 
\t \t \t editable: true, 
 
\t \t \t firstDay: 1, 
 
\t \t \t selectable: true, 
 
\t \t \t defaultView: 'month', 
 
\t \t \t 
 
\t \t \t eventSources: [ 
 
          { 
 
          url: '<?= base_url() ?>calendar/get_alert', 
 
          customRender: true 
 
          }, 
 
          { 
 
          url: '<?= base_url() ?>calendar/get_Sales', 
 
          customRender: false 
 

 
          }, 
 
          { 
 
          url: '<?= base_url() ?>calendar/get_purchases', 
 
          customRender: false, 
 
          } 
 
          ], 
 
     
 
    
 
          eventRender: function(event, element, view){ 
 
          if (event.customRender == true) 
 
          { 
 
          var el = element.html(); 
 
          element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>"); 
 
       
 
          element.find('.close').click(function(){ 
 
          if(!confirm("Delete event?")){ 
 
           return false; 
 
          }else{ 
 
          var id = event.id; 
 
          $.post('<?= base_url() ?>calendar/delete_alert', 
 
          { 
 
           id:id 
 
          }, 
 
          function(data){ 
 
           if(data == 1) 
 
           alert('Successfully deleted'); 
 
           else 
 
           alert('Error deleted'); 
 
          }); 
 
           $("#fullcalendar").fullCalendar('removeEvents', event.id); 
 
        }   
 
       }); 
 
      }   
 
      } 
 
\t \t  }); \t \t 
 
\t  }); 
 
    </script>

Answer 1

1つの簡単な方法は、このようなものです：

すべてのイベントに余分なカスタムブール値プロパティを与えるとしましょう。たとえば、trueまたはfalseに設定して、単に "customRender"と呼ぶことができます。 "get_alert"ソースから来るすべてのイベントにrender : trueを設定し、他のすべてのイベントをfalseに設定します。

：イベントがtrueに設定された「customRender」を持っている場合にのみ実行されるように、その後eventRender方法では、単純に、if文ですべてのカスタムロジックをラップ

{ 
    start: "2017-01-01", 
    end: "2017-01-03", 
    //...other properties here... 
    customRender: true 
} 

：イベントは次のようになります

eventRender: function(event, element, view) { 
    if (event.customRender == true) 
    { 
    var el = element.html(); 
    element.html("<div style='width:90%;float:left;'>" + el + "</div><div style='text-align:right;' class='close'><span class='glyphicon glyphicon-trash'></span></div>"); 
    //...etc 
    } 
}