javascript - 全日历事件渲染

Question

我开始使用 fullcalendar，但遇到以下问题。我使用 codeigniter 将我的数据从 php 导入 JSON，使用具有 fullcalendar 的函数“eventSources”将多个数据导入 JSON 格式。现在我的问题是我需要应用属性“eventRender”，但只应用到我获得的数据之一，在这种情况下，我只想将它应用到“Calendar/get_alert”，但是我应用到所有数据，还有一些改变它的方法？我留下我的代码。

<script type="text/javascript">
	 $(document).ready(function(){
		 $('#fullcalendar').fullCalendar({
		    header: {
	              left: 'title',
		      center: 'agendaDay,agendaWeek,month',
		      right: 'prev,next today'
		    },
			  editable: true,
			  firstDay: 1,
			  selectable: true,
			  defaultView: 'month',
			
			  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);
                  }         
              });             
          }   
		    });		
	    });
    </script>

新代码，每个url的数据以JSON格式显示

<script type="text/javascript">
	 $(document).ready(function(){
		 $('#fullcalendar').fullCalendar({
		    header: {
	              left: 'title',
		      center: 'agendaDay,agendaWeek,month',
		      right: 'prev,next today'
		    },
			  editable: true,
			  firstDay: 1,
			  selectable: true,
			  defaultView: 'month',
			
			  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);
                  }         
              });  
            }           
          }   
		    });		
	    });
    </script>

Answer 1

一个简单的方法是这样的:

假设您为所有事件提供了一个额外的自定义 bool 属性。例如，我们可以将其称为“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
  }
}