Eventcalen在fullcalendar

Question

我開始使用fullcalendar，我有以下問題。我使用codeigniter從php中將數據導入JSON中，使用函數「eventSources」（具有fullcalendar）將多個數據導入JSON格式。現在我的問題是，我需要應用屬性，「eventRender」，但只適用於我得到的數據之一，在這種情況下，我只是希望它適用於'日曆/ 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>

新的代碼，每個URL VIEN格式JSON數據

<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

一個簡單的方法來做到這一點是這樣的：

讓我們假設你給所有事件一個額外的自定義布爾屬性。例如，我們可以將其稱爲「customRender」，設置爲true或false。您可以將來自「get_alert」源的所有事件設置爲render : true，其他所有事件均爲false。

例如事件會是這個樣子：

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

然後在eventRender方法，只需if語句包裹所有自定義邏輯的，所以它只能運行如果事件有「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 
    } 
}