EventRender at fullcalendar

Question

I'm starting to work with fullcalendar, and I have the following problem. I'm bringing my data into JSON from php with codeigniter, using the function, "eventSources" which has fullcalendar, to bring multiple data into JSON format. Now my problem is that I need to apply the property, "eventRender" but only to one of the data I get, in this case I just want it to apply to ' Calendar / get_alert', however I Is applying to all, and some way to change that? I leave the code I have.

<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>

new code, The data of each url vien in format 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

One simple way to do it is like this:

Let's say you give all the events an extra custom boolean property. For example we could just call it "customRender", set to true or false. You would set all events coming from the "get_alert" source to have render : true, and all the others false.

e.g. an event would look something like this:

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

Then in the eventRender method, simply wrap all your custom logic in an if statement, so that it only runs if the event has "customRender" set to 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
  }
}